@getflip/swirl-components 0.389.0 → 0.390.0
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 +161 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-color-input.cjs.entry.js +2 -2
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-date-input.cjs.entry.js +17 -8
- package/dist/cjs/swirl-form-control.cjs.entry.js +16 -2
- package/dist/cjs/swirl-resource-list-section.cjs.entry.js +1 -1
- package/dist/cjs/swirl-separator.cjs.entry.js +5 -1
- package/dist/cjs/swirl-text-input.cjs.entry.js +4 -4
- package/dist/cjs/swirl-time-input.cjs.entry.js +1 -1
- package/dist/collection/components/swirl-color-input/swirl-color-input.js +21 -2
- package/dist/collection/components/swirl-date-input/swirl-date-input.js +37 -9
- package/dist/collection/components/swirl-form-control/swirl-form-control.css +6 -16
- package/dist/collection/components/swirl-form-control/swirl-form-control.js +36 -1
- package/dist/collection/components/swirl-resource-list-section/swirl-resource-list-section.js +1 -1
- package/dist/collection/components/swirl-separator/swirl-separator.js +31 -1
- package/dist/collection/components/swirl-text-input/swirl-text-input.css +1 -5
- package/dist/collection/components/swirl-text-input/swirl-text-input.js +22 -3
- package/dist/collection/components/swirl-time-input/swirl-time-input.js +20 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-color-input.js +4 -3
- package/dist/components/swirl-date-input.js +19 -9
- package/dist/components/swirl-form-control.js +18 -2
- package/dist/components/swirl-resource-list-section.js +1 -1
- package/dist/components/swirl-separator2.js +6 -1
- package/dist/components/swirl-text-input2.js +5 -4
- package/dist/components/swirl-time-input.js +2 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-color-input.entry.js +2 -2
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-date-input.entry.js +17 -8
- package/dist/esm/swirl-form-control.entry.js +16 -2
- package/dist/esm/swirl-resource-list-section.entry.js +1 -1
- package/dist/esm/swirl-separator.entry.js +5 -1
- package/dist/esm/swirl-text-input.entry.js +4 -4
- package/dist/esm/swirl-time-input.entry.js +1 -1
- package/dist/swirl-components/p-180ed63e.entry.js +1 -0
- package/dist/swirl-components/{p-a320aae9.entry.js → p-3cb7f345.entry.js} +1 -1
- package/dist/swirl-components/{p-87554dba.entry.js → p-57dfce0c.entry.js} +1 -1
- package/dist/swirl-components/p-81b2e380.entry.js +1 -0
- package/dist/swirl-components/p-81ee71b8.entry.js +1 -0
- package/dist/swirl-components/p-83cb302b.entry.js +1 -0
- package/dist/swirl-components/p-b243a736.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-color-input/swirl-color-input.d.ts +1 -0
- package/dist/types/components/swirl-date-input/swirl-date-input.d.ts +3 -2
- package/dist/types/components/swirl-form-control/swirl-form-control.d.ts +2 -0
- package/dist/types/components/swirl-separator/swirl-separator.d.ts +2 -0
- package/dist/types/components/swirl-text-input/swirl-text-input.d.ts +1 -0
- package/dist/types/components/swirl-time-input/swirl-time-input.d.ts +1 -0
- package/dist/types/components.d.ts +20 -2
- package/package.json +1 -1
- package/vscode-data.json +32 -0
- package/dist/swirl-components/p-5dd8a1b1.entry.js +0 -1
- package/dist/swirl-components/p-5f5034b5.entry.js +0 -1
- package/dist/swirl-components/p-90243eec.entry.js +0 -1
- package/dist/swirl-components/p-d17cd35b.entry.js +0 -1
- package/dist/swirl-components/p-fc54fadf.entry.js +0 -1
|
@@ -2,7 +2,7 @@ import { r as registerInstance, h, H as Host, d as getElement } from './index-CW
|
|
|
2
2
|
import { c as classnames } from './index-orsBiyT_.js';
|
|
3
3
|
import { j as isDescendantOf, k as getActiveElement } from './utils-DytJsmhr.js';
|
|
4
4
|
|
|
5
|
-
const swirlFormControlCss = ".sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{--swirl-autocomplete-tags-margin-top:var(--s-space-4);display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder):not(.form-control--label-position-outside) .form-control__label-text.sc-swirl-form-control{position:absolute;top:0;bottom:0;display:flex;align-items:center;height:auto}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control--font-size-sm.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control--font-size-sm.sc-swirl-form-control .form-control__description.sc-swirl-form-control{font-size:var(--s-font-size-sm)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select:not(.form-control--label-position-outside) .form-control__label-text.sc-swirl-form-control{position:absolute;top:0;bottom:0;display:flex;align-items:center;height:auto;pointer-events:auto}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-base);--swirl-autocomplete-tags-margin-top:0;padding-top:calc(var(--s-line-height-sm) + var(--s-space-4))}.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--is-select) .form-control__label.sc-swirl-form-control{cursor:text}.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:calc(100% + var(--s-space-4));left:0;color:var(--s-text-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);transform:none;opacity:1}.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--label-position-outside.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--label-position-outside.form-control--font-size-base.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.form-control--font-size-base.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__label-text.sc-swirl-form-control{display:flex;align-items:center}}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:none;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:flex;position:relative;padding:var(--s-space-4);z-index:10}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control:hover{cursor:default}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control swirl-tooltip.sc-swirl-form-control::after{content:\"\";position:absolute;inset:calc(-1 * var(--s-space-4))}}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-swirl-form-control .form-control__description.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--inline.sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control--inline.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--hide-label.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}.form-control--has-prefix.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{position:static}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-highlight);border-right-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-top-left-radius:0;border-bottom-left-radius:0}.form-control--has-prefix.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{display:flex}.form-control__controls.sc-swirl-form-control{position:relative;display:flex;align-items:stretch}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__secondary-label.sc-swirl-form-control{font-weight:var(--s-font-weight-normal);color:var(--s-text-subdued);margin-left:var(--s-space-4)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);text-align:start;white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__prefix.sc-swirl-form-control{z-index:1;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:center;align-items:center;border-top:var(--s-border-width-default) solid var(--s-border-strong);border-bottom:var(--s-border-width-default) solid var(--s-border-strong);border-left:var(--s-border-width-default) solid var(--s-border-strong);border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm);background-color:var(--s-surface-raised-default)}.form-control__prefix.sc-swirl-form-control-s>select{height:100%;margin-right:calc(-1 * var(--s-space-16));margin-left:calc(-1 * var(--s-space-16));padding-right:calc(var(--s-space-16) + 1.25rem);padding-left:var(--s-space-16);border:none;color:var(--s-text-default);background:url('data:image/svg+xml,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 12.4579C9.88889 12.4579 9.78472 12.4404 9.6875 12.4054C9.59027 12.3709 9.5 12.312 9.41666 12.2287L5.5625 8.37453C5.40972 8.22175 5.33694 8.03064 5.34416 7.8012C5.35083 7.57231 5.43055 7.38148 5.58333 7.2287C5.73611 7.07592 5.93055 6.99953 6.16666 6.99953C6.40277 6.99953 6.59722 7.07592 6.75 7.2287L10 10.4787L13.2708 7.20787C13.4236 7.05509 13.6147 6.98203 13.8442 6.9887C14.0731 6.99592 14.2639 7.07592 14.4167 7.2287C14.5694 7.38148 14.6458 7.57592 14.6458 7.81203C14.6458 8.04814 14.5694 8.24259 14.4167 8.39537L10.5833 12.2287C10.5 12.312 10.4097 12.3709 10.3125 12.4054C10.2153 12.4404 10.1111 12.4579 10 12.4579Z\" fill=\"%236E6E6E\"/></svg>');background-color:transparent;background-repeat:no-repeat;background-position:right var(--s-space-8) center;font:inherit;line-height:var(--s-line-height-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control__prefix.sc-swirl-form-control-s>select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__prefix.sc-swirl-form-control-s>select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control__icon.sc-swirl-form-control{position:absolute;top:0px;bottom:0px;margin:auto;display:flex;align-items:center;justify-content:center;width:var(--s-space-20)}.form-control--has-icon.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{margin-left:calc(var(--s-space-20) + var(--s-space-12))}.form-control--has-icon.sc-swirl-form-control .form-control__input.sc-swirl-form-control{margin-left:calc(var(--s-space-20) + var(--s-space-12))}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4)}.form-control__input.sc-swirl-form-control-s>[contenteditable]:focus{outline:none}.form-control__input.sc-swirl-form-control-s>[contenteditable]{width:100%;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__input.sc-swirl-form-control-s>[contenteditable]{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
|
|
5
|
+
const swirlFormControlCss = ".sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{--swirl-autocomplete-tags-margin-top:var(--s-space-4);display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder):not(.form-control--label-position-outside) .form-control__label-text.sc-swirl-form-control{position:absolute;top:0;bottom:0;display:flex;align-items:center;height:auto}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control--font-size-sm.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control--font-size-sm.sc-swirl-form-control .form-control__description.sc-swirl-form-control{font-size:var(--s-font-size-sm)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select:not(.form-control--label-position-outside) .form-control__label-text.sc-swirl-form-control{position:absolute;top:0;bottom:0;display:flex;align-items:center;height:auto;pointer-events:auto}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-base);--swirl-autocomplete-tags-margin-top:0;padding-top:calc(var(--s-line-height-sm) + var(--s-space-4))}.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--is-select) .form-control__label.sc-swirl-form-control{cursor:text}.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:calc(100% + var(--s-space-4));left:0;color:var(--s-text-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);transform:none;opacity:1}.form-control--label-position-outside.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--label-position-outside.form-control--font-size-base.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.form-control--font-size-base.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__label-text.sc-swirl-form-control{display:flex;align-items:center}}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:none;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:flex;position:relative;padding:var(--s-space-4);z-index:10}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control:hover{cursor:default}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control swirl-tooltip.sc-swirl-form-control::after{content:\"\";position:absolute;inset:calc(-1 * var(--s-space-4))}}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control:not(.form-control--disabled) .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control,.form-control--readonly.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-default);background-color:var(--s-surface-raised-default)}.form-control--disabled.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control,.form-control--readonly.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-default)}.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--inline.sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control--inline.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--hide-label.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}.form-control--has-prefix.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{position:static}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-highlight);border-right-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-top-left-radius:0;border-bottom-left-radius:0}.form-control--has-prefix.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{display:flex}.form-control__controls.sc-swirl-form-control{position:relative;display:flex;align-items:stretch}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__secondary-label.sc-swirl-form-control{font-weight:var(--s-font-weight-normal);color:var(--s-text-subdued);margin-left:var(--s-space-4)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);text-align:start;white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__prefix.sc-swirl-form-control{z-index:1;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:center;align-items:center;border-top:var(--s-border-width-default) solid var(--s-border-strong);border-bottom:var(--s-border-width-default) solid var(--s-border-strong);border-left:var(--s-border-width-default) solid var(--s-border-strong);border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm);background-color:var(--s-surface-raised-default)}.form-control__prefix.sc-swirl-form-control-s>select{height:100%;margin-right:calc(-1 * var(--s-space-16));margin-left:calc(-1 * var(--s-space-16));padding-right:calc(var(--s-space-16) + 1.25rem);padding-left:var(--s-space-16);border:none;color:var(--s-text-default);background:url('data:image/svg+xml,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 12.4579C9.88889 12.4579 9.78472 12.4404 9.6875 12.4054C9.59027 12.3709 9.5 12.312 9.41666 12.2287L5.5625 8.37453C5.40972 8.22175 5.33694 8.03064 5.34416 7.8012C5.35083 7.57231 5.43055 7.38148 5.58333 7.2287C5.73611 7.07592 5.93055 6.99953 6.16666 6.99953C6.40277 6.99953 6.59722 7.07592 6.75 7.2287L10 10.4787L13.2708 7.20787C13.4236 7.05509 13.6147 6.98203 13.8442 6.9887C14.0731 6.99592 14.2639 7.07592 14.4167 7.2287C14.5694 7.38148 14.6458 7.57592 14.6458 7.81203C14.6458 8.04814 14.5694 8.24259 14.4167 8.39537L10.5833 12.2287C10.5 12.312 10.4097 12.3709 10.3125 12.4054C10.2153 12.4404 10.1111 12.4579 10 12.4579Z\" fill=\"%236E6E6E\"/></svg>');background-color:transparent;background-repeat:no-repeat;background-position:right var(--s-space-8) center;font:inherit;line-height:var(--s-line-height-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control__prefix.sc-swirl-form-control-s>select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__prefix.sc-swirl-form-control-s>select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control__icon.sc-swirl-form-control{position:absolute;top:0px;bottom:0px;margin:auto;display:flex;align-items:center;justify-content:center;width:var(--s-space-20)}.form-control--has-icon.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{margin-left:calc(var(--s-space-20) + var(--s-space-12))}.form-control--has-icon.sc-swirl-form-control .form-control__input.sc-swirl-form-control{margin-left:calc(var(--s-space-20) + var(--s-space-12))}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4)}.form-control__input.sc-swirl-form-control-s>[contenteditable]:focus{outline:none}.form-control__input.sc-swirl-form-control-s>[contenteditable]{width:100%;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__input.sc-swirl-form-control-s>[contenteditable]{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
|
|
6
6
|
|
|
7
7
|
const SwirlFormControl = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -43,6 +43,7 @@ const SwirlFormControl = class {
|
|
|
43
43
|
this.associateDescriptionWithInputElement();
|
|
44
44
|
this.associateLabelWithInputElement();
|
|
45
45
|
this.setInputElementDisabledState();
|
|
46
|
+
this.setInputElementReadonlyState();
|
|
46
47
|
this.setInputElementInlineState();
|
|
47
48
|
this.setInputElementInvalidState();
|
|
48
49
|
this.setInputElementLabel();
|
|
@@ -69,6 +70,17 @@ const SwirlFormControl = class {
|
|
|
69
70
|
this.inputEl.removeAttribute("disabled");
|
|
70
71
|
}
|
|
71
72
|
}
|
|
73
|
+
setInputElementReadonlyState() {
|
|
74
|
+
if (!Boolean(this.inputEl)) {
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
if (this.readonly) {
|
|
78
|
+
this.inputEl.setAttribute("readonly", "true");
|
|
79
|
+
}
|
|
80
|
+
else {
|
|
81
|
+
this.inputEl.removeAttribute("readonly");
|
|
82
|
+
}
|
|
83
|
+
}
|
|
72
84
|
setInputElementInlineState() {
|
|
73
85
|
if (!Boolean(this.inputEl)) {
|
|
74
86
|
return;
|
|
@@ -152,6 +164,7 @@ const SwirlFormControl = class {
|
|
|
152
164
|
const isSelect = this.inputEl.tagName === "SWIRL-SELECT";
|
|
153
165
|
const className = classnames("form-control", `form-control--font-size-${this.fontSize}`, `form-control--label-position-${this.labelPosition}`, {
|
|
154
166
|
"form-control--disabled": this.disabled,
|
|
167
|
+
"form-control--readonly": this.readonly,
|
|
155
168
|
"form-control--has-character-counter": hasCharacterCounter,
|
|
156
169
|
"form-control--has-focus": this.hasFocus,
|
|
157
170
|
"form-control--has-placeholder": hasPlaceholder,
|
|
@@ -164,13 +177,14 @@ const SwirlFormControl = class {
|
|
|
164
177
|
"form-control--is-select": isSelect,
|
|
165
178
|
});
|
|
166
179
|
const LabelTag = hasContenteditableControl ? "div" : "label";
|
|
167
|
-
return (h(Host, { key: '
|
|
180
|
+
return (h(Host, { key: '5d0c6f34f0a5e091572badf875c331f2950d2c61', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { key: '0da20c4144a3e16915f01ce479be0930881283c3', class: className, role: "group" }, h("span", { key: '207e74fd91682c0badd35dec00f38cc24f6fbfda', class: "form-control__controls" }, h("span", { key: 'c924c7af99f42e86c38967f94f2ec2ce1adda03e', class: "form-control__prefix" }, h("slot", { key: 'f9e1846ac14c9f5abbc1d81ec54883a6f111dcf0', name: "prefix" })), h(LabelTag, { key: 'cf048cebee46418130e22a953bb36ca7611c9eb8', class: "form-control__label", onClick: this.onLabelClick }, hasIcon && (h("span", { key: 'e0fde25c920b12d8389f4855638c2565e546695a', class: "form-control__icon" }, h("swirl-icon", { key: '64d5f602368b330926d8325e3690cee440c4c180', glyph: this.icon, size: 20 }))), h("span", { key: 'c02bce9518e6396f928a6174d02e3c3535adefd9', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (h("span", { key: '72506a8b0f98719edb72150e4dbf646ea5614a3d', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && (h("span", { key: 'd3deeecc715dd27b75b4b6b5964efc28a3d0f4ac', class: "form-control__tooltip" }, h("swirl-tooltip", { key: '6701adfdee424f93b50e382ef01aae5fbd90595f', content: this.tooltip, positioning: "fixed", position: "top" }, h("swirl-icon-help", { key: 'fe2bcf26d75359ad8a1d0dce9d9558deece72e4a', size: 16, tabindex: "0" }))))), h("span", { key: '86f1422d88df28dea22430c1907921899b84361c', class: "form-control__input" }, h("slot", { key: 'b75a71a7a284222a6b886355f9cacac0acc20fb8' })))), showDescription && (h("span", { key: '264578a1b5e01adee8170f3fc0995b5b2e3281ea', class: "form-control__description", id: this.descriptionId }, this.description)), h("span", { key: '8d15ec8ce9ff19a4034ce5f397a83acce09cc30b', "aria-live": "polite" }, showErrorMessage && (h("span", { key: 'ee8a03d72fd611d65a952cf7e9b44d6be8d55257', class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { key: '5fe80768d96bb623c3fba7f67fbe801c2d5537f4', message: this.errorMessage, size: "s" })))))));
|
|
168
181
|
}
|
|
169
182
|
get el() { return getElement(this); }
|
|
170
183
|
static get watchers() { return {
|
|
171
184
|
"description": ["watchDescription"],
|
|
172
185
|
"errorMessage": ["watchErrorMessage"],
|
|
173
186
|
"disabled": ["setInputElementDisabledState"],
|
|
187
|
+
"readonly": ["setInputElementReadonlyState"],
|
|
174
188
|
"inline": ["setInputElementInlineState"],
|
|
175
189
|
"invalid": ["setInputElementInvalidState"],
|
|
176
190
|
"label": ["setInputElementLabel"]
|
|
@@ -12,7 +12,7 @@ const SwirlResourceListSection = class {
|
|
|
12
12
|
render() {
|
|
13
13
|
const role = !!this.el.closest('[role="grid"]') ? "rowgroup" : "listitem";
|
|
14
14
|
const childrenListRole = role === "listitem" ? "list" : undefined;
|
|
15
|
-
return (h(Host, { key: '883825134d9bd2ef376418bbc4d5d522991bb62c' }, this.hasSeparator && (h("swirl-separator", { key: '
|
|
15
|
+
return (h(Host, { key: '883825134d9bd2ef376418bbc4d5d522991bb62c' }, this.hasSeparator && (h("swirl-separator", { key: '446341e2a3170b7c6bd2d5e48ba68f86b95b7076', spacing: this.separatorSpacing, semantics: "none" })), h("div", { key: '20bc260909c18c768fa433911ae7360f3c5a4bc7', "aria-labelledby": "label", role: role }, h("span", { key: '1c1af323bf34c0c38dd69cfc046c2d62776afa51', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), h("swirl-stack", { key: '41c2237588f8f98a3efa267479fc1fec815d6d8f', spacing: this.spacing, swirlAriaRole: childrenListRole }, h("slot", { key: '4844b6ac248e94b177e358a2dc608d84ed9c0f88' })))));
|
|
16
16
|
}
|
|
17
17
|
get el() { return getElement(this); }
|
|
18
18
|
};
|
|
@@ -9,6 +9,7 @@ const SwirlSeparator = class {
|
|
|
9
9
|
this.borderColor = "default";
|
|
10
10
|
this.color = "default";
|
|
11
11
|
this.orientation = "horizontal";
|
|
12
|
+
this.semantics = "separator";
|
|
12
13
|
this.spacing = "8";
|
|
13
14
|
}
|
|
14
15
|
componentWillLoad() {
|
|
@@ -31,7 +32,10 @@ const SwirlSeparator = class {
|
|
|
31
32
|
paddingLeft: `var(--s-space-${this.spacing})`,
|
|
32
33
|
};
|
|
33
34
|
const className = classnames("separator", `separator--color-${this.color}`, `separator--orientation-${this.orientation}`);
|
|
34
|
-
|
|
35
|
+
const attributes = this.semantics === "separator"
|
|
36
|
+
? { "aria-orientation": this.orientation }
|
|
37
|
+
: {};
|
|
38
|
+
return (h(Host, { key: '23acb3a29638b92737838e75a54d7616e6c9150e', ...attributes, class: className, role: this.semantics, style: styles }, h("span", { key: '3ebf80f47fb36438403551f560db91ecf7d7e559', class: "separator__line" }), this.label && (h(Fragment, { key: '84ac7960ba714ab27559751c11bd7c4b56ac3176' }, h("span", { key: '6f8dc3ad3bde938789e28ad05c67da657262a4d1', class: "separator__label" }, this.label), h("span", { key: '63ddb77ea887a890bb1731d12a939783b592e21a', class: "separator__line" })))));
|
|
35
39
|
}
|
|
36
40
|
};
|
|
37
41
|
SwirlSeparator.style = swirlSeparatorCss;
|
|
@@ -3,7 +3,7 @@ import { c as classnames } from './index-orsBiyT_.js';
|
|
|
3
3
|
import { D as DesktopMediaQuery } from './media-query.service-CpP-qu5C.js';
|
|
4
4
|
import './utils-DytJsmhr.js';
|
|
5
5
|
|
|
6
|
-
const swirlTextInputCss = ".sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--
|
|
6
|
+
const swirlTextInputCss = ".sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--font-size-sm.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-sm.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--font-size-base.sc-swirl-text-input{--swirl-text-input-placeholder-size:var(--s-font-size-base);font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-base.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text-input--has-suffix.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:0.25rem;min-width:0.25rem}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-subdued);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type=\"number\"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type=\"password\"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}";
|
|
7
7
|
|
|
8
8
|
const SwirlTextInput = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -141,10 +141,11 @@ const SwirlTextInput = class {
|
|
|
141
141
|
const ariaInvalid = this.invalid === true || this.invalid === false
|
|
142
142
|
? String(this.invalid)
|
|
143
143
|
: undefined;
|
|
144
|
-
const showStepper = this.type === "number" && !this.disabled;
|
|
144
|
+
const showStepper = this.type === "number" && !this.disabled && !this.readonly;
|
|
145
145
|
const showPasswordToggle = this.type === "password" && !this.disabled;
|
|
146
146
|
const showClearButton = this.clearable &&
|
|
147
147
|
!this.disabled &&
|
|
148
|
+
!this.readonly &&
|
|
148
149
|
Boolean(this.value) &&
|
|
149
150
|
!showPasswordToggle &&
|
|
150
151
|
!showStepper &&
|
|
@@ -153,13 +154,12 @@ const SwirlTextInput = class {
|
|
|
153
154
|
const className = classnames("text-input", `text-input--font-size-${this.fontSize}`, `text-input--type-${this.type}`, {
|
|
154
155
|
"text-input--auto-grow": this.autoGrow,
|
|
155
156
|
"text-input--clearable": this.clearable,
|
|
156
|
-
"text-input--disabled": this.disabled,
|
|
157
157
|
"text-input--disable-dynamic-width": this.disableDynamicWidth || Boolean(this.placeholder),
|
|
158
158
|
"text-input--has-suffix": Boolean(this.suffixLabel),
|
|
159
159
|
"text-input--inline": this.inline,
|
|
160
160
|
"text-input--show-password": this.type === "password" && this.showPassword,
|
|
161
161
|
});
|
|
162
|
-
return (h(Host, { key: '
|
|
162
|
+
return (h(Host, { key: '47932ba64512368fef5948a2560afdf722ae106c' }, h("div", { key: '089210f7581a26934fa1851899e1b279c96a4f55', class: className }, this.prefixLabel && (h("span", { key: '7d77cb2af315fe8909fa92f7ea328e4970c853fb', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '1c73d0168a7ca0e7380b665c0e398b3dfb8be35b', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '2ae0f456126a27f0256b5dfd851da830ea379018', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: 'ea47c05178f0ce61188ca8ed15f3bbe6f132b1dc', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: 'd419f462f82b28bc6c8602f3d4cf65d2649d0234', size: this.iconSize }))), showPasswordToggle && (h("button", { key: '565f3c92ef3fd90d1d43c673b94feec9bcf213cf', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'ec02752a5258a06827fc156fd4b4cd5a0e712751', class: "text-input__stepper" }, h("button", { key: 'c698d2fda7bf64b338920410ef0c894955cf6372', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '0f662dd62d1a315d288622a31e4f0dfb0ee530e0', size: this.iconSize })), h("button", { key: '49fc4ece3d4b67e3b6fa38ecdb681edf5e2e0791', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: '49de410032a3f513ba78e7f6a986645441db80eb', size: this.iconSize })))), this.showCharacterCounter && (h("span", { key: 'cc12de838a87f683af5ab14009cedcd1f98b39bb', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: '8df695b8970b8f35d7b119bff1cfe573c427f1e6' }, this.characterCounterLabel), this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
|
|
163
163
|
}
|
|
164
164
|
static get watchers() { return {
|
|
165
165
|
"value": ["watchValue"]
|
|
@@ -143,7 +143,7 @@ const SwirlTimeInput = class {
|
|
|
143
143
|
const className = classnames("time-input", {
|
|
144
144
|
"time-input--inline": this.inline,
|
|
145
145
|
});
|
|
146
|
-
return (h(Host, { key: '
|
|
146
|
+
return (h(Host, { key: 'e23b038bf99ddfd9893ff2b2cc2981ee7de0fbda' }, h("div", { key: '26b6cbb9a67cfb986bae34b2ff604862992f7076', class: className }, h("input", { key: 'd5123ad3101a1c0571e491d91c5916fba51aabe9', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: 'd53e9ea53813798aa0cdd2ce7f6f685053859862', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '61e91a6ae302b0b64d4283525f02b97bad37e9ad', size: this.iconSize })))));
|
|
147
147
|
}
|
|
148
148
|
get el() { return getElement(this); }
|
|
149
149
|
static get watchers() { return {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as i,h as e,H as s,d as a}from"./p-CWOhMVtL.js";import{c as n}from"./p-orsBiyT_.js";import{f as d,I as o,p as r,i as h}from"./p-D3UoejeY.js";import{D as p}from"./p-DJ2FyZeW.js";import{i as c}from"./p-DytJsmhr.js";const l="yyyy-MM-dd",u=class{constructor(e){t(this,e),this.invalidInput=i(this,"invalidInput",7),this.valueChange=i(this,"valueChange",7),this.datePickerDisableDate=()=>!1,this.datePickerLabel="Date picker",this.datePickerTriggerLabel="Open date picker",this.firstDayOfWeek=0,this.format="yyyy-MM-dd",this.locale="en-US",this.placeholder="yyyy-mm-dd",this.preferredInputMode="input",this.iconSize=24,this.isInPickOnlyMode=!1,this.mediaQueryUnsubscribe=()=>{},this.onClick=t=>{t.preventDefault(),this.readonly||"pick"===this.preferredInputMode&&(this.pickerPopover.open(this.el),c()||this.focus())},this.onMouseDown=()=>{this.readonly||"pick"===this.preferredInputMode&&this.pickerPopover.close()},this.onFocus=t=>{this.handleAutoSelect(t)},this.onBlur=t=>{if(this.readonly)return;const i=this.pickerPopover.contains(t.relatedTarget);this.setIsInPickOnlyMode(!i)},this.onPickDate=t=>{const i=t.detail,e=d(i,l);this.value=e,this.inputEl.value=d(i,this.pattern),this.mask.updateValue(),this.setIsInPickOnlyMode(!0),this.pickerPopover.close()}}componentWillLoad(){const t=Array.from(document.querySelectorAll("swirl-date-input")).indexOf(this.el);this.id=`swirl-date-input-${t}`,this.setIsInPickOnlyMode(!0)}componentDidLoad(){this.setupMask(),this.mediaQueryUnsubscribe=p.subscribe((t=>{this.updateIconSize(t)})),this.autoFocus&&this.focus()}disconnectedCallback(){this.mask?.destroy(),this.mediaQueryUnsubscribe()}watchFormat(){this.setupMask()}watchValue(t,i){t!==i&&this.updateValue()}async openPicker(){this.pickerPopover.open(this.el)}focus(){setTimeout((()=>{this.inputEl.focus()}))}updateIconSize(t){this.iconSize=t?20:24}handleAutoSelect(t){this.autoSelect?t.target&&t.target instanceof HTMLInputElement&&t.target.select():setTimeout((()=>{t.target&&t.target instanceof HTMLInputElement&&t.target.setSelectionRange&&t.target.setSelectionRange(0,0)}))}setIsInPickOnlyMode(t){this.isInPickOnlyMode=!("pick"!==this.preferredInputMode||!c())&&t}setupMask(){this.mask?.destroy(),this.pattern=this.format.replace(/(?<!d)d(?!d)/g,"dd").replace(/(?<!M)M(?!M)/g,"MM").replace(/(?<!y)y(?!y)/g,"yyyy").replace(/(?<!y)yyy(?!y)/g,"yyyy"),this.pattern||(this.pattern=l),this.mask=o(this.inputEl,{mask:Date,pattern:this.pattern.replace(/([^A-Za-z0-9])/g,"$1`"),autofix:"pad",lazy:!0,overwrite:!0,eager:"append",blocks:{dd:{mask:o.MaskedRange,from:1,to:31,maxLength:2},MM:{mask:o.MaskedRange,from:1,to:12,maxLength:2},yy:{mask:o.MaskedRange,from:0,to:99,maxLength:2},yyyy:{mask:o.MaskedRange,from:1e3,to:9999,maxLength:4}},format:t=>{const i=d(t,this.pattern);return h(t)?(this.value=d(t,l),i):(this.invalidInput.emit(t.toString()),"")},parse:t=>r(t,this.pattern,new Date)}),this.updateValue()}updateValue(){if(this.value){const t=r(this.value,l,new Date);if(h(t)){const i=d(t,this.pattern);this.mask.value=i,this.valueChange.emit(this.value)}else this.invalidInput.emit(this.value)}}render(){const t=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,i=Boolean(this.value)?r(this.value,l,new Date):void 0,a=h(i)?i:void 0,d=n("date-input",{"date-input--inline":this.inline});return e(s,{key:"25b83b05dab36c56e17c1f6dcf45e705f66c1df8"},e("div",{key:"90a6be1d15745839c0965d07b0d35b49d62f7d3e",class:d},e("input",{key:"af5c2d16783c14fe885caa4b25e99f802862a650","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"date-input__input",disabled:this.disabled,readonly:this.isInPickOnlyMode||this.readonly,id:this.id,inputmode:"numeric",onClick:this.onClick,onMouseDown:this.onMouseDown,onFocus:this.onFocus,onBlur:this.onBlur,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,type:"text"}),!this.readonly&&e("swirl-popover-trigger",{key:"2dea9fed0f17648c96de50cf4fadc797cc99aebe",swirlPopover:`popover-${this.id}`},e("button",{key:"032997153ab427ce0ee11eec6ff504a090dd3bf5","aria-label":this.datePickerTriggerLabel,class:"date-input__date-picker-button",disabled:this.disabled,type:"button"},e("swirl-icon-today",{key:"fbe7af7d43f80712e0dc4fe27fee5c0f6af59d6e",size:this.iconSize})))),!(this.disabled||this.readonly)&&e("swirl-popover",{key:"f5df6b8977b7d93d9a924314da667442ee533a64",animation:"scale-in-y",class:"date-input__date-picker-popover",id:`popover-${this.id}`,label:this.datePickerLabel,placement:"bottom-end",ref:t=>this.pickerPopover=t},e("swirl-date-picker",{key:"b564afaa8af674be0619050c1d4bc9d4204e7fb3",disableDate:this.datePickerDisableDate,firstDayOfWeek:this.firstDayOfWeek,labels:this.labels,locale:this.locale,onValueChange:this.onPickDate,value:a,startDate:a})))}get el(){return a(this)}static get watchers(){return{format:["watchFormat"],value:["watchValue"]}}};u.style=".sc-swirl-date-input-h{display:flex;width:100%}.sc-swirl-date-input-h *.sc-swirl-date-input{box-sizing:border-box}.date-input.sc-swirl-date-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:0}}.date-input__input.sc-swirl-date-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.date-input__input.sc-swirl-date-input:focus{outline:none}.date-input__input.sc-swirl-date-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__input.sc-swirl-date-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-input__date-picker-button.sc-swirl-date-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.date-input__date-picker-button.sc-swirl-date-input:focus:not(:focus-visible){outline:none}.date-input__date-picker-button.sc-swirl-date-input:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-input__date-picker-button.sc-swirl-date-input:disabled{color:var(--s-icon-disabled);cursor:default}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__date-picker-button.sc-swirl-date-input{top:-0.625rem}}@media (max-width: 767px){.date-input__date-picker-popover.sc-swirl-date-input{position:fixed}}";export{u as swirl_date_input}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,c as e,h as r,H as s}from"./p-CWOhMVtL.js";import{c as i}from"./p-orsBiyT_.js";import{v as o}from"./p-DD3477fe.js";const n=(t,e=0,r=1)=>t>r?r:t<e?e:t,a=(t,e=0,r=Math.pow(10,e))=>Math.round(r*t)/r,l=t=>("#"===t[0]&&(t=t.substring(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:4===t.length?a(parseInt(t[3]+t[3],16)/255,2):1}:{r:parseInt(t.substring(0,2),16),g:parseInt(t.substring(2,4),16),b:parseInt(t.substring(4,6),16),a:8===t.length?a(parseInt(t.substring(6,8),16)/255,2):1}),c=t=>{const{h:e,s:r,l:s}=(({h:t,s:e,v:r,a:s})=>{const i=(200-e)*r/100;return{h:a(t),s:a(i>0&&i<200?e*r/100/(i<=100?i:200-i)*100:0),l:a(i/2),a:a(s,2)}})(t);return`hsl(${e}, ${r}%, ${s}%)`},h=t=>{const e=t.toString(16);return e.length<2?"0"+e:e},d=(t,e)=>{if(t===e)return!0;for(const r in t)if(t[r]!==e[r])return!1;return!0},u={},p=t=>{let e=u[t];return e||(e=document.createElement("template"),e.innerHTML=t,u[t]=e),e},b=(t,e,r)=>{t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:r}))};let f=!1;const m=t=>"touches"in t,g=(t,e)=>{const r=m(e)?e.touches[0]:e,s=t.el.getBoundingClientRect();b(t.el,"move",t.getMove({x:n((r.pageX-(s.left+window.pageXOffset))/s.width),y:n((r.pageY-(s.top+window.pageYOffset))/s.height)}))};class v{constructor(t,e,r,s){const i=p(`<div role="slider" tabindex="0" part="${e}" ${r}><div part="${e}-pointer"></div></div>`);t.appendChild(i.content.cloneNode(!0));const o=t.querySelector(`[part=${e}]`);o.addEventListener("mousedown",this),o.addEventListener("touchstart",this),o.addEventListener("keydown",this),this.el=o,this.xy=s,this.nodes=[o.firstChild,o]}set dragging(t){const e=t?document.addEventListener:document.removeEventListener;e(f?"touchmove":"mousemove",this),e(f?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(f&&!m(t)||(f||(f=m(t)),0)))(t)||!f&&0!=t.button)return;this.el.focus(),g(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),g(this,t);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((t,e)=>{const r=e.keyCode;r>40||t.xy&&r<37||r<33||(e.preventDefault(),b(t.el,"move",t.getMove({x:39===r?.01:37===r?-.01:34===r?.05:33===r?-.05:35===r?1:36===r?-1:0,y:40===r?.01:38===r?-.01:0},!0)))})(this,t)}}style(t){t.forEach(((t,e)=>{for(const r in t)this.nodes[e].style.setProperty(r,t[r])}))}}class x extends v{constructor(t){super(t,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:t}){this.h=t,this.style([{left:t/360*100+"%",color:c({h:t,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",`${a(t)}`)}getMove(t,e){return{h:e?n(this.h+360*t.x,0,360):360*t.x}}}class w extends v{constructor(t){super(t,"saturation",'aria-label="Color"',!0)}update(t){this.hsva=t,this.style([{top:100-t.v+"%",left:`${t.s}%`,color:c(t)},{"background-color":c({h:t.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${a(t.s)}%, Brightness ${a(t.v)}%`)}getMove(t,e){return{s:e?n(this.hsva.s+100*t.x,0,100):100*t.x,v:e?n(this.hsva.v-100*t.y,0,100):Math.round(100-100*t.y)}}}const k=Symbol("same"),y=Symbol("color"),_=Symbol("hsva"),$=Symbol("update"),C=Symbol("parts"),I=Symbol("css"),S=Symbol("sliders");class M extends HTMLElement{static get observedAttributes(){return["color"]}get[I](){return[':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}',"[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}","[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}"]}get[S](){return[w,x]}get color(){return this[y]}set color(t){if(!this[k](t)){const e=this.colorModel.toHsva(t);this[$](e),this[y]=t}}constructor(){super();const t=p(`<style>${this[I].join("")}</style>`),e=this.attachShadow({mode:"open"});e.appendChild(t.content.cloneNode(!0)),e.addEventListener("move",this),this[C]=this[S].map((t=>new t(e)))}connectedCallback(){if(this.hasOwnProperty("color")){const t=this.color;delete this.color,this.color=t}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(t,e,r){const s=this.colorModel.fromAttr(r);this[k](s)||(this.color=s)}handleEvent(t){const e=this[_],r={...e,...t.detail};let s;this[$](r),d(r,e)||this[k](s=this.colorModel.fromHsva(r))||(this[y]=s,b(this,"color-changed",{value:s}))}[k](t){return this.color&&this.colorModel.equal(t,this.color)}[$](t){this[_]=t,this[C].forEach((e=>e.update(t)))}}const z={defaultColor:"#000",toHsva:t=>(({r:t,g:e,b:r,a:s})=>{const i=Math.max(t,e,r),o=i-Math.min(t,e,r),n=o?i===t?(e-r)/o:i===e?2+(r-t)/o:4+(t-e)/o:0;return{h:a(60*(n<0?n+6:n)),s:a(i?o/i*100:0),v:a(i/255*100),a:s}})(l(t)),fromHsva:({h:t,s:e,v:r})=>(({r:t,g:e,b:r,a:s})=>{const i=s<1?h(a(255*s)):"";return"#"+h(t)+h(e)+h(r)+i})((({h:t,s:e,v:r,a:s})=>{t=t/360*6,e/=100,r/=100;const i=Math.floor(t),o=r*(1-e),n=r*(1-(t-i)*e),l=r*(1-(1-t+i)*e),c=i%6;return{r:a(255*[r,n,o,o,l,r][c]),g:a(255*[l,r,r,n,o,o][c]),b:a(255*[o,o,l,r,r,n][c]),a:a(s,2)}})({h:t,s:e,v:r,a:1})),equal:(t,e)=>t.toLowerCase()===e.toLowerCase()||d(l(t),l(e)),fromAttr:t=>t};class E extends M{get colorModel(){return z}}customElements.define("hex-color-picker",class extends E{});const B=class{constructor(r){t(this,r),this.inputBlur=e(this,"inputBlur",7),this.inputFocus=e(this,"inputFocus",7),this.valueChange=e(this,"valueChange",7),this.pickerButtonLabel="Open color picker",this.pickerLabel="Color picker",this.pickerId=`color-picker-${o()}`,this.onPickerChange=t=>{this.value=t.detail.value},this.onChange=t=>{this.value=t.target.value},this.onBlur=t=>{this.inputBlur.emit(t)},this.onFocus=t=>{this.inputFocus.emit(t),this.handleAutoSelect(t)},this.onInput=t=>{this.onChange(t)}}componentDidLoad(){this.autoFocus&&setTimeout((()=>{this.inputEl.focus()})),this.picker.addEventListener("color-changed",this.onPickerChange)}disconnectedCallback(){this.picker?.removeEventListener("color-changed",this.onPickerChange)}watchValue(t,e){t!==e&&this.valueChange.emit(t)}handleAutoSelect(t){this.autoSelect&&t.target.select()}render(){const t=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,e=i("color-input",{"color-input--inline":this.inline});return r(s,{key:"11afff41dd4a7948c148a91b3f6aadf7b2fd3539"},r("div",{key:"224d2f63d072ccb306df12c62505ab33a68e4504",class:e},r("input",{key:"5ec5c0491274b558b3cbbf41ad0ef2f9da33041b","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"color-input__input",disabled:this.disabled,maxLength:7,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,spellcheck:"false",type:"text",value:this.value}),r("swirl-popover-trigger",{key:"c9a1f1f4cfc8fd3fb22a815f57b261656b196418",swirlPopover:this.pickerId},r("button",{key:"0c57bb61295e4a41b8e630f2c89e9ce8ba407f64","aria-label":this.pickerButtonLabel,class:"color-input__preview-button",style:{backgroundColor:this.disabled?"var(--s-border-subdued)":this.value},type:"button"})),r("swirl-popover",{key:"6b6529c04b552bbf06f29fd0aa2b17aa9b03b2b2",animation:"scale-in-y",id:this.pickerId,label:this.pickerLabel,placement:"bottom-end"},r("swirl-box",{key:"8279834c7b7ba9e6d161bc2d0a21e4fc5e933ea4",centerInline:!0,paddingBlockEnd:"8",paddingBlockStart:"8",paddingInlineEnd:"16",paddingInlineStart:"16"},r("hex-color-picker",{key:"0af2a6c8dda121892cccad7ea7c28953f905af49",color:this.value,ref:t=>this.picker=t})))))}static get watchers(){return{value:["watchValue"]}}};B.style=".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-input-h *.sc-swirl-color-input{box-sizing:border-box}.color-input.sc-swirl-color-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.color-input--inline.sc-swirl-color-input .color-input__preview-button.sc-swirl-color-input{width:1.5rem;height:1.5rem;margin-top:-0.125rem;margin-right:-0.25rem;margin-bottom:-0.125rem}.color-input__input.sc-swirl-color-input{display:inline-flex;width:100%;margin:0;padding:0;flex-grow:1;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.color-input__input.sc-swirl-color-input:focus{outline:none}.color-input__input.sc-swirl-color-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.color-input__input.sc-swirl-color-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.color-input__preview-button.sc-swirl-color-input{width:2.75rem;height:2.75rem;margin-top:-1.25rem;flex-shrink:0;border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-s);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}";export{B as swirl_color_input}
|
|
1
|
+
import{r as t,c as e,h as r,H as s}from"./p-CWOhMVtL.js";import{c as i}from"./p-orsBiyT_.js";import{v as o}from"./p-DD3477fe.js";const n=(t,e=0,r=1)=>t>r?r:t<e?e:t,a=(t,e=0,r=Math.pow(10,e))=>Math.round(r*t)/r,l=t=>("#"===t[0]&&(t=t.substring(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:4===t.length?a(parseInt(t[3]+t[3],16)/255,2):1}:{r:parseInt(t.substring(0,2),16),g:parseInt(t.substring(2,4),16),b:parseInt(t.substring(4,6),16),a:8===t.length?a(parseInt(t.substring(6,8),16)/255,2):1}),c=t=>{const{h:e,s:r,l:s}=(({h:t,s:e,v:r,a:s})=>{const i=(200-e)*r/100;return{h:a(t),s:a(i>0&&i<200?e*r/100/(i<=100?i:200-i)*100:0),l:a(i/2),a:a(s,2)}})(t);return`hsl(${e}, ${r}%, ${s}%)`},h=t=>{const e=t.toString(16);return e.length<2?"0"+e:e},d=(t,e)=>{if(t===e)return!0;for(const r in t)if(t[r]!==e[r])return!1;return!0},u={},p=t=>{let e=u[t];return e||(e=document.createElement("template"),e.innerHTML=t,u[t]=e),e},b=(t,e,r)=>{t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:r}))};let f=!1;const m=t=>"touches"in t,g=(t,e)=>{const r=m(e)?e.touches[0]:e,s=t.el.getBoundingClientRect();b(t.el,"move",t.getMove({x:n((r.pageX-(s.left+window.pageXOffset))/s.width),y:n((r.pageY-(s.top+window.pageYOffset))/s.height)}))};class v{constructor(t,e,r,s){const i=p(`<div role="slider" tabindex="0" part="${e}" ${r}><div part="${e}-pointer"></div></div>`);t.appendChild(i.content.cloneNode(!0));const o=t.querySelector(`[part=${e}]`);o.addEventListener("mousedown",this),o.addEventListener("touchstart",this),o.addEventListener("keydown",this),this.el=o,this.xy=s,this.nodes=[o.firstChild,o]}set dragging(t){const e=t?document.addEventListener:document.removeEventListener;e(f?"touchmove":"mousemove",this),e(f?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(f&&!m(t)||(f||(f=m(t)),0)))(t)||!f&&0!=t.button)return;this.el.focus(),g(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),g(this,t);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((t,e)=>{const r=e.keyCode;r>40||t.xy&&r<37||r<33||(e.preventDefault(),b(t.el,"move",t.getMove({x:39===r?.01:37===r?-.01:34===r?.05:33===r?-.05:35===r?1:36===r?-1:0,y:40===r?.01:38===r?-.01:0},!0)))})(this,t)}}style(t){t.forEach(((t,e)=>{for(const r in t)this.nodes[e].style.setProperty(r,t[r])}))}}class x extends v{constructor(t){super(t,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:t}){this.h=t,this.style([{left:t/360*100+"%",color:c({h:t,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",`${a(t)}`)}getMove(t,e){return{h:e?n(this.h+360*t.x,0,360):360*t.x}}}class w extends v{constructor(t){super(t,"saturation",'aria-label="Color"',!0)}update(t){this.hsva=t,this.style([{top:100-t.v+"%",left:`${t.s}%`,color:c(t)},{"background-color":c({h:t.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${a(t.s)}%, Brightness ${a(t.v)}%`)}getMove(t,e){return{s:e?n(this.hsva.s+100*t.x,0,100):100*t.x,v:e?n(this.hsva.v-100*t.y,0,100):Math.round(100-100*t.y)}}}const k=Symbol("same"),y=Symbol("color"),_=Symbol("hsva"),$=Symbol("update"),C=Symbol("parts"),I=Symbol("css"),S=Symbol("sliders");class M extends HTMLElement{static get observedAttributes(){return["color"]}get[I](){return[':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}',"[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}","[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}"]}get[S](){return[w,x]}get color(){return this[y]}set color(t){if(!this[k](t)){const e=this.colorModel.toHsva(t);this[$](e),this[y]=t}}constructor(){super();const t=p(`<style>${this[I].join("")}</style>`),e=this.attachShadow({mode:"open"});e.appendChild(t.content.cloneNode(!0)),e.addEventListener("move",this),this[C]=this[S].map((t=>new t(e)))}connectedCallback(){if(this.hasOwnProperty("color")){const t=this.color;delete this.color,this.color=t}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(t,e,r){const s=this.colorModel.fromAttr(r);this[k](s)||(this.color=s)}handleEvent(t){const e=this[_],r={...e,...t.detail};let s;this[$](r),d(r,e)||this[k](s=this.colorModel.fromHsva(r))||(this[y]=s,b(this,"color-changed",{value:s}))}[k](t){return this.color&&this.colorModel.equal(t,this.color)}[$](t){this[_]=t,this[C].forEach((e=>e.update(t)))}}const z={defaultColor:"#000",toHsva:t=>(({r:t,g:e,b:r,a:s})=>{const i=Math.max(t,e,r),o=i-Math.min(t,e,r),n=o?i===t?(e-r)/o:i===e?2+(r-t)/o:4+(t-e)/o:0;return{h:a(60*(n<0?n+6:n)),s:a(i?o/i*100:0),v:a(i/255*100),a:s}})(l(t)),fromHsva:({h:t,s:e,v:r})=>(({r:t,g:e,b:r,a:s})=>{const i=s<1?h(a(255*s)):"";return"#"+h(t)+h(e)+h(r)+i})((({h:t,s:e,v:r,a:s})=>{t=t/360*6,e/=100,r/=100;const i=Math.floor(t),o=r*(1-e),n=r*(1-(t-i)*e),l=r*(1-(1-t+i)*e),c=i%6;return{r:a(255*[r,n,o,o,l,r][c]),g:a(255*[l,r,r,n,o,o][c]),b:a(255*[o,o,l,r,r,n][c]),a:a(s,2)}})({h:t,s:e,v:r,a:1})),equal:(t,e)=>t.toLowerCase()===e.toLowerCase()||d(l(t),l(e)),fromAttr:t=>t};class E extends M{get colorModel(){return z}}customElements.define("hex-color-picker",class extends E{});const B=class{constructor(r){t(this,r),this.inputBlur=e(this,"inputBlur",7),this.inputFocus=e(this,"inputFocus",7),this.valueChange=e(this,"valueChange",7),this.pickerButtonLabel="Open color picker",this.pickerLabel="Color picker",this.pickerId=`color-picker-${o()}`,this.onPickerChange=t=>{this.value=t.detail.value},this.onChange=t=>{this.value=t.target.value},this.onBlur=t=>{this.inputBlur.emit(t)},this.onFocus=t=>{this.inputFocus.emit(t),this.handleAutoSelect(t)},this.onInput=t=>{this.onChange(t)}}componentDidLoad(){this.autoFocus&&setTimeout((()=>{this.inputEl.focus()})),this.picker.addEventListener("color-changed",this.onPickerChange)}disconnectedCallback(){this.picker?.removeEventListener("color-changed",this.onPickerChange)}watchValue(t,e){t!==e&&this.valueChange.emit(t)}handleAutoSelect(t){this.autoSelect&&t.target.select()}render(){const t=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,e=i("color-input",{"color-input--inline":this.inline});return r(s,{key:"c0c04b9abf5c2e340a0ac5d1624e2ae7e527e7dd"},r("div",{key:"95f5ec8e01a73489acb00a4a604fd0d796be0e14",class:e},r("input",{key:"d88ff31c8fa3c8d9708cf7ceb4abf49454f7d0d6","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"color-input__input",disabled:this.disabled,maxLength:7,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,spellcheck:"false",type:"text",value:this.value,readonly:this.readonly}),r("swirl-popover-trigger",{key:"492291366d2914f168cb76dc253477757bbf9b3d",swirlPopover:this.pickerId},r("button",{key:"602763bcc593e31260a9f3d6eeafb39aec13b70d",disabled:this.readonly,"aria-label":this.pickerButtonLabel,class:"color-input__preview-button",style:{backgroundColor:this.disabled?"var(--s-border-subdued)":this.value},type:"button"})),r("swirl-popover",{key:"1be04659f6b485c2704244f25317c227d6447f11",animation:"scale-in-y",id:this.pickerId,label:this.pickerLabel,placement:"bottom-end"},r("swirl-box",{key:"35bbd11b6dbedd0202f13d65b5b753ac152af11c",centerInline:!0,paddingBlockEnd:"8",paddingBlockStart:"8",paddingInlineEnd:"16",paddingInlineStart:"16"},r("hex-color-picker",{key:"bbd5c1d1e5f33a859ee9f52eaa33d38e4ef1a541",color:this.value,ref:t=>this.picker=t})))))}static get watchers(){return{value:["watchValue"]}}};B.style=".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-input-h *.sc-swirl-color-input{box-sizing:border-box}.color-input.sc-swirl-color-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.color-input--inline.sc-swirl-color-input .color-input__preview-button.sc-swirl-color-input{width:1.5rem;height:1.5rem;margin-top:-0.125rem;margin-right:-0.25rem;margin-bottom:-0.125rem}.color-input__input.sc-swirl-color-input{display:inline-flex;width:100%;margin:0;padding:0;flex-grow:1;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.color-input__input.sc-swirl-color-input:focus{outline:none}.color-input__input.sc-swirl-color-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.color-input__input.sc-swirl-color-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.color-input__preview-button.sc-swirl-color-input{width:2.75rem;height:2.75rem;margin-top:-1.25rem;flex-shrink:0;border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-s);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}";export{B as swirl_color_input}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as i,c as t,h as s,H as e,d as n}from"./p-CWOhMVtL.js";import{c as a}from"./p-orsBiyT_.js";import{I as r,p as o,i as h,f as m}from"./p-D3UoejeY.js";import{D as p}from"./p-DJ2FyZeW.js";import"./p-DytJsmhr.js";const c="HH:mm:ss",l=class{constructor(s){i(this,s),this.inputBlur=t(this,"inputBlur",7),this.inputFocus=t(this,"inputFocus",7),this.valueChange=t(this,"valueChange",7),this.format="HH:mm",this.placeholder="hh:mm",this.iconSize=24,this.mediaQueryUnsubscribe=()=>{},this.onBlur=i=>{this.inputBlur.emit(i)},this.onClick=i=>{i.preventDefault()},this.onFocus=i=>{this.inputFocus.emit(i),this.handleAutoSelect(i)}}componentWillLoad(){const i=Array.from(document.querySelectorAll("swirl-time-input")).indexOf(this.el);this.id=`swirl-time-input-${i}`}componentDidLoad(){this.setupMask(),this.mediaQueryUnsubscribe=p.subscribe((i=>{this.updateIconSize(i)})),this.autoFocus&&setTimeout((()=>{this.inputEl.focus()}))}disconnectedCallback(){this.mask?.destroy(),this.mediaQueryUnsubscribe()}watchFormat(){this.setupMask()}watchValue(i,t){i!==t&&(this.valueChange.emit(i),this.mask.value=i)}updateIconSize(i){this.iconSize=i?20:24}handleAutoSelect(i){this.autoSelect?i.target&&i.target instanceof HTMLInputElement&&i.target.select():setTimeout((()=>{i.target&&i.target instanceof HTMLInputElement&&i.target.setSelectionRange&&i.target.setSelectionRange(0,0)}))}setupMask(){this.mask?.destroy();const i=this.format.replace(/(?<!H)H(?!H)/g,"HH").replace(/(?<!h)h(?!h)/g,"hh").replace(/(?<!m)m(?!m)/g,"mm").replace(/(?<!s)s(?!s)/g,"ss");if(this.mask=r(this.inputEl,{mask:Date,pattern:i.replace(/([^A-Za-z0-9])/g,"$1`"),autofix:"pad",lazy:!0,overwrite:!0,eager:"append",blocks:{HH:{mask:r.MaskedRange,from:0,to:23,maxLength:2},hh:{mask:r.MaskedRange,from:1,to:12,maxLength:2},mm:{mask:r.MaskedRange,from:0,to:59,maxLength:2},ss:{mask:r.MaskedRange,from:0,to:59,maxLength:2}},format:t=>h(t)?(this.value=m(t,c),m(t,i)):"",parse:t=>o(t,i,new Date)}),this.value){const t=o(this.value,c,new Date);if(h(t)){const s=m(t,i);this.mask.value=s}}}render(){const i=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,t=a("time-input",{"time-input--inline":this.inline});return s(e,{key:"
|
|
1
|
+
import{r as i,c as t,h as s,H as e,d as n}from"./p-CWOhMVtL.js";import{c as a}from"./p-orsBiyT_.js";import{I as r,p as o,i as h,f as m}from"./p-D3UoejeY.js";import{D as p}from"./p-DJ2FyZeW.js";import"./p-DytJsmhr.js";const c="HH:mm:ss",l=class{constructor(s){i(this,s),this.inputBlur=t(this,"inputBlur",7),this.inputFocus=t(this,"inputFocus",7),this.valueChange=t(this,"valueChange",7),this.format="HH:mm",this.placeholder="hh:mm",this.iconSize=24,this.mediaQueryUnsubscribe=()=>{},this.onBlur=i=>{this.inputBlur.emit(i)},this.onClick=i=>{i.preventDefault()},this.onFocus=i=>{this.inputFocus.emit(i),this.handleAutoSelect(i)}}componentWillLoad(){const i=Array.from(document.querySelectorAll("swirl-time-input")).indexOf(this.el);this.id=`swirl-time-input-${i}`}componentDidLoad(){this.setupMask(),this.mediaQueryUnsubscribe=p.subscribe((i=>{this.updateIconSize(i)})),this.autoFocus&&setTimeout((()=>{this.inputEl.focus()}))}disconnectedCallback(){this.mask?.destroy(),this.mediaQueryUnsubscribe()}watchFormat(){this.setupMask()}watchValue(i,t){i!==t&&(this.valueChange.emit(i),this.mask.value=i)}updateIconSize(i){this.iconSize=i?20:24}handleAutoSelect(i){this.autoSelect?i.target&&i.target instanceof HTMLInputElement&&i.target.select():setTimeout((()=>{i.target&&i.target instanceof HTMLInputElement&&i.target.setSelectionRange&&i.target.setSelectionRange(0,0)}))}setupMask(){this.mask?.destroy();const i=this.format.replace(/(?<!H)H(?!H)/g,"HH").replace(/(?<!h)h(?!h)/g,"hh").replace(/(?<!m)m(?!m)/g,"mm").replace(/(?<!s)s(?!s)/g,"ss");if(this.mask=r(this.inputEl,{mask:Date,pattern:i.replace(/([^A-Za-z0-9])/g,"$1`"),autofix:"pad",lazy:!0,overwrite:!0,eager:"append",blocks:{HH:{mask:r.MaskedRange,from:0,to:23,maxLength:2},hh:{mask:r.MaskedRange,from:1,to:12,maxLength:2},mm:{mask:r.MaskedRange,from:0,to:59,maxLength:2},ss:{mask:r.MaskedRange,from:0,to:59,maxLength:2}},format:t=>h(t)?(this.value=m(t,c),m(t,i)):"",parse:t=>o(t,i,new Date)}),this.value){const t=o(this.value,c,new Date);if(h(t)){const s=m(t,i);this.mask.value=s}}}render(){const i=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,t=a("time-input",{"time-input--inline":this.inline});return s(e,{key:"e23b038bf99ddfd9893ff2b2cc2981ee7de0fbda"},s("div",{key:"26b6cbb9a67cfb986bae34b2ff604862992f7076",class:t},s("input",{key:"d5123ad3101a1c0571e491d91c5916fba51aabe9","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":i,autoFocus:this.autoFocus,class:"time-input__input",disabled:this.disabled,id:this.id,inputmode:"numeric",onBlur:this.onBlur,onClick:this.onClick,onFocus:this.onFocus,placeholder:this.placeholder,ref:i=>this.inputEl=i,required:this.required,type:"text",readonly:this.readonly}),s("span",{key:"d53e9ea53813798aa0cdd2ce7f6f685053859862",class:"time-input__icon"},s("swirl-icon-time-outlined",{key:"61e91a6ae302b0b64d4283525f02b97bad37e9ad",size:this.iconSize}))))}get el(){return n(this)}static get watchers(){return{format:["watchFormat"],value:["watchValue"]}}};l.style=".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h *.sc-swirl-time-input{box-sizing:border-box}.time-input.sc-swirl-time-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:0}}.time-input__input.sc-swirl-time-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.time-input__input.sc-swirl-time-input:focus{outline:none}.time-input__input.sc-swirl-time-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__input.sc-swirl-time-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.time-input__icon.sc-swirl-time-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__icon.sc-swirl-time-input{top:-0.625rem}}";export{l as swirl_time_input}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as o,h as r,H as t,d as s}from"./p-CWOhMVtL.js";import{c as l}from"./p-orsBiyT_.js";import{j as e,k as i}from"./p-DytJsmhr.js";const n=class{constructor(r){o(this,r),this.fontSize="default",this.labelPosition="inside",this.descriptionId=`form-control-description-${Math.round(1e5*Math.random())}`,this.labelId=`form-control-label-${Math.round(1e5*Math.random())}`,this.listenToInputValueChanges=()=>{this.inputEl.addEventListener("valueChange",this.checkInputValue)},this.checkInputValue=()=>{this.inputValue=this.inputEl?.value},this.onFocusIn=()=>{this.hasFocus=!0},this.onFocusOut=()=>{this.hasFocus=!1},this.onKeyDown=o=>{"Tab"===o.key&&setTimeout((()=>{e(i(),this.el)||(this.hasFocus=!1)}))},this.onLabelClick=()=>{Boolean(this.inputEl.getAttribute("contenteditable"))&&this.inputEl.focus()}}componentWillLoad(){this.inputEl=this.el.firstElementChild,this.associateDescriptionWithInputElement(),this.associateLabelWithInputElement(),this.setInputElementDisabledState(),this.setInputElementReadonlyState(),this.setInputElementInlineState(),this.setInputElementInvalidState(),this.setInputElementLabel(),this.checkInputValue(),this.listenToInputValueChanges()}componentDidRender(){this.checkInputValue()}watchDescription(){this.associateDescriptionWithInputElement()}watchErrorMessage(){this.associateDescriptionWithInputElement()}setInputElementDisabledState(){Boolean(this.inputEl)&&(this.disabled?this.inputEl.setAttribute("disabled","true"):this.inputEl.removeAttribute("disabled"))}setInputElementReadonlyState(){Boolean(this.inputEl)&&(this.readonly?this.inputEl.setAttribute("readonly","true"):this.inputEl.removeAttribute("readonly"))}setInputElementInlineState(){Boolean(this.inputEl)&&(this.inline||"outside"===this.labelPosition?this.inputEl.setAttribute("inline","true"):this.inputEl.removeAttribute("inline"))}setInputElementInvalidState(){Boolean(this.inputEl)&&(this.invalid?this.inputEl.setAttribute("invalid","true"):this.inputEl.removeAttribute("invalid"))}setInputElementLabel(){if(!Boolean(this.inputEl))return;let o=this.label;this.secondaryLabel&&(o+=` ${this.secondaryLabel}`),this.inputEl.setAttribute("label",o)}onWindowClick(o){this.hasFocus&&(this.el.contains(o.target)||(o.stopPropagation(),this.hasFocus=!1))}associateLabelWithInputElement(){Boolean(this.inputEl.getAttribute("contenteditable"))&&(this.inputEl.setAttribute("aria-labelledby",this.labelId),this.inputEl.setAttribute("aria-describedby",this.descriptionId))}associateDescriptionWithInputElement(){Boolean(this.inputEl)&&(Boolean(this.description)||Boolean(this.errorMessage)?Boolean(this.inputEl.getAttribute("contenteditable"))?this.inputEl.setAttribute("aria-describedby",this.descriptionId):this.inputEl.setAttribute("swirl-aria-describedby",this.descriptionId):(this.inputEl.removeAttribute("aria-describedby"),this.inputEl.removeAttribute("swirl-aria-describedby")))}render(){const o=Boolean(this.errorMessage),s=Boolean(this.description)&&!o,e=Boolean(this.inputEl.getAttribute("contenteditable")),i=Boolean(this.el.querySelector('[slot="prefix"]')),n=Boolean(this.icon),c=Array.isArray(this.inputValue)?this.inputValue.length>0:Boolean(this.inputValue)||e&&Boolean(this.inputEl.innerHTML),a=Boolean(this.inputEl.getAttribute("show-character-counter")),f=Boolean(this.inputEl.getAttribute("placeholder"))||Boolean(this.inputEl.placeholder),m=l("form-control",`form-control--font-size-${this.fontSize}`,`form-control--label-position-${this.labelPosition}`,{"form-control--disabled":this.disabled,"form-control--readonly":this.readonly,"form-control--has-character-counter":a,"form-control--has-focus":this.hasFocus,"form-control--has-placeholder":f,"form-control--has-prefix":i,"form-control--has-icon":n,"form-control--has-value":c,"form-control--hide-label":this.hideLabel,"form-control--inline":this.inline,"form-control--invalid":this.invalid,"form-control--is-select":"SWIRL-SELECT"===this.inputEl.tagName}),d=e?"div":"label";return r(t,{key:"5d0c6f34f0a5e091572badf875c331f2950d2c61",onFocusin:this.onFocusIn,onFocusout:this.onFocusOut,onKeyDown:this.onKeyDown},r("div",{key:"0da20c4144a3e16915f01ce479be0930881283c3",class:m,role:"group"},r("span",{key:"207e74fd91682c0badd35dec00f38cc24f6fbfda",class:"form-control__controls"},r("span",{key:"c924c7af99f42e86c38967f94f2ec2ce1adda03e",class:"form-control__prefix"},r("slot",{key:"f9e1846ac14c9f5abbc1d81ec54883a6f111dcf0",name:"prefix"})),r(d,{key:"cf048cebee46418130e22a953bb36ca7611c9eb8",class:"form-control__label",onClick:this.onLabelClick},n&&r("span",{key:"e0fde25c920b12d8389f4855638c2565e546695a",class:"form-control__icon"},r("swirl-icon",{key:"64d5f602368b330926d8325e3690cee440c4c180",glyph:this.icon,size:20})),r("span",{key:"c02bce9518e6396f928a6174d02e3c3535adefd9",class:"form-control__label-text",id:this.labelId},this.label,this.secondaryLabel&&"outside"===this.labelPosition&&r("span",{key:"72506a8b0f98719edb72150e4dbf646ea5614a3d",class:"form-control__secondary-label"},this.secondaryLabel),this.tooltip&&r("span",{key:"d3deeecc715dd27b75b4b6b5964efc28a3d0f4ac",class:"form-control__tooltip"},r("swirl-tooltip",{key:"6701adfdee424f93b50e382ef01aae5fbd90595f",content:this.tooltip,positioning:"fixed",position:"top"},r("swirl-icon-help",{key:"fe2bcf26d75359ad8a1d0dce9d9558deece72e4a",size:16,tabindex:"0"})))),r("span",{key:"86f1422d88df28dea22430c1907921899b84361c",class:"form-control__input"},r("slot",{key:"b75a71a7a284222a6b886355f9cacac0acc20fb8"})))),s&&r("span",{key:"264578a1b5e01adee8170f3fc0995b5b2e3281ea",class:"form-control__description",id:this.descriptionId},this.description),r("span",{key:"8d15ec8ce9ff19a4034ce5f397a83acce09cc30b","aria-live":"polite"},o&&r("span",{key:"ee8a03d72fd611d65a952cf7e9b44d6be8d55257",class:"form-control__error-message",id:this.descriptionId},r("swirl-inline-error",{key:"5fe80768d96bb623c3fba7f67fbe801c2d5537f4",message:this.errorMessage,size:"s"})))))}get el(){return s(this)}static get watchers(){return{description:["watchDescription"],errorMessage:["watchErrorMessage"],disabled:["setInputElementDisabledState"],readonly:["setInputElementReadonlyState"],inline:["setInputElementInlineState"],invalid:["setInputElementInvalidState"],label:["setInputElementLabel"]}}};n.style='.sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{--swirl-autocomplete-tags-margin-top:var(--s-space-4);display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder):not(.form-control--label-position-outside) .form-control__label-text.sc-swirl-form-control{position:absolute;top:0;bottom:0;display:flex;align-items:center;height:auto}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control--font-size-sm.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control--font-size-sm.sc-swirl-form-control .form-control__description.sc-swirl-form-control{font-size:var(--s-font-size-sm)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select:not(.form-control--label-position-outside) .form-control__label-text.sc-swirl-form-control{position:absolute;top:0;bottom:0;display:flex;align-items:center;height:auto;pointer-events:auto}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-base);--swirl-autocomplete-tags-margin-top:0;padding-top:calc(var(--s-line-height-sm) + var(--s-space-4))}.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--is-select) .form-control__label.sc-swirl-form-control{cursor:text}.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:calc(100% + var(--s-space-4));left:0;color:var(--s-text-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);transform:none;opacity:1}.form-control--label-position-outside.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--label-position-outside.form-control--font-size-base.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.form-control--font-size-base.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__label-text.sc-swirl-form-control{display:flex;align-items:center}}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:none;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:flex;position:relative;padding:var(--s-space-4);z-index:10}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control:hover{cursor:default}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control swirl-tooltip.sc-swirl-form-control::after{content:"";position:absolute;inset:calc(-1 * var(--s-space-4))}}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control:not(.form-control--disabled) .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control,.form-control--readonly.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-default);background-color:var(--s-surface-raised-default)}.form-control--disabled.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control,.form-control--readonly.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-default)}.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--inline.sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control--inline.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--hide-label.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}.form-control--has-prefix.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{position:static}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-highlight);border-right-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-top-left-radius:0;border-bottom-left-radius:0}.form-control--has-prefix.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{display:flex}.form-control__controls.sc-swirl-form-control{position:relative;display:flex;align-items:stretch}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__secondary-label.sc-swirl-form-control{font-weight:var(--s-font-weight-normal);color:var(--s-text-subdued);margin-left:var(--s-space-4)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);text-align:start;white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__prefix.sc-swirl-form-control{z-index:1;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:center;align-items:center;border-top:var(--s-border-width-default) solid var(--s-border-strong);border-bottom:var(--s-border-width-default) solid var(--s-border-strong);border-left:var(--s-border-width-default) solid var(--s-border-strong);border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm);background-color:var(--s-surface-raised-default)}.form-control__prefix.sc-swirl-form-control-s>select{height:100%;margin-right:calc(-1 * var(--s-space-16));margin-left:calc(-1 * var(--s-space-16));padding-right:calc(var(--s-space-16) + 1.25rem);padding-left:var(--s-space-16);border:none;color:var(--s-text-default);background:url(\'data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12.4579C9.88889 12.4579 9.78472 12.4404 9.6875 12.4054C9.59027 12.3709 9.5 12.312 9.41666 12.2287L5.5625 8.37453C5.40972 8.22175 5.33694 8.03064 5.34416 7.8012C5.35083 7.57231 5.43055 7.38148 5.58333 7.2287C5.73611 7.07592 5.93055 6.99953 6.16666 6.99953C6.40277 6.99953 6.59722 7.07592 6.75 7.2287L10 10.4787L13.2708 7.20787C13.4236 7.05509 13.6147 6.98203 13.8442 6.9887C14.0731 6.99592 14.2639 7.07592 14.4167 7.2287C14.5694 7.38148 14.6458 7.57592 14.6458 7.81203C14.6458 8.04814 14.5694 8.24259 14.4167 8.39537L10.5833 12.2287C10.5 12.312 10.4097 12.3709 10.3125 12.4054C10.2153 12.4404 10.1111 12.4579 10 12.4579Z" fill="%236E6E6E"/></svg>\');background-color:transparent;background-repeat:no-repeat;background-position:right var(--s-space-8) center;font:inherit;line-height:var(--s-line-height-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control__prefix.sc-swirl-form-control-s>select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__prefix.sc-swirl-form-control-s>select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control__icon.sc-swirl-form-control{position:absolute;top:0px;bottom:0px;margin:auto;display:flex;align-items:center;justify-content:center;width:var(--s-space-20)}.form-control--has-icon.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{margin-left:calc(var(--s-space-20) + var(--s-space-12))}.form-control--has-icon.sc-swirl-form-control .form-control__input.sc-swirl-form-control{margin-left:calc(var(--s-space-20) + var(--s-space-12))}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4)}.form-control__input.sc-swirl-form-control-s>[contenteditable]:focus{outline:none}.form-control__input.sc-swirl-form-control-s>[contenteditable]{width:100%;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__input.sc-swirl-form-control-s>[contenteditable]{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}';export{n as swirl_form_control}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as i,h as e,H as s}from"./p-CWOhMVtL.js";import{c as n}from"./p-orsBiyT_.js";import{D as r}from"./p-DJ2FyZeW.js";import"./p-DytJsmhr.js";const p=class{constructor(e){t(this,e),this.inputBlur=i(this,"inputBlur",7),this.inputFocus=i(this,"inputFocus",7),this.valueChange=i(this,"valueChange",7),this.autoComplete="on",this.characterCounterLabel="Used characters",this.clearButtonLabel="Clear input",this.fontSize="default",this.passwordToggleLabel="Toggle password display",this.rows=1,this.type="text",this.iconSize=24,this.showPassword=!1,this.mediaQueryUnsubscribe=()=>{},this.clear=()=>{this.inputEl.value="",this.value="",this.valueChange.emit(""),this.inputEl.focus()},this.onChange=t=>{this.value=t.target.value},this.onBlur=t=>{this.inputBlur.emit(t)},this.onFocus=t=>{this.inputFocus.emit(t),this.handleAutoSelect(t)},this.onInput=t=>{this.onChange(t)},this.onKeyPress=t=>{"number"===this.type&&["+","-","e"].includes(t.key)&&t.preventDefault()},this.decreaseValue=()=>{if("number"!==this.type)return;const t=this.step||1;let i=this.inputEl.valueAsNumber;isNaN(this.inputEl.valueAsNumber)&&(i=void 0!==this.min?this.min+1:1),this.value=String(Math.max(this.min||-1/0,i-t)),this.valueChange.emit(this.value)},this.increaseValue=()=>{if("number"!==this.type)return;const t=this.step||1;let i=this.inputEl.valueAsNumber;isNaN(this.inputEl.valueAsNumber)&&(i=void 0!==this.min?this.min-1:-1),this.value=String(Math.min(this.max||1/0,i+t)),this.valueChange.emit(this.value)},this.togglePassword=()=>{"password"===this.type&&(this.showPassword=!this.showPassword)}}componentDidLoad(){this.mediaQueryUnsubscribe=r.subscribe((t=>{this.updateIconSize(t)})),this.autoFocus&&setTimeout((()=>{this.inputEl.focus()}))}componentDidRender(){this.adjustInputSize()}disconnectedCallback(){this.mediaQueryUnsubscribe()}async blurInput(){this.inputEl.blur()}async focusInput(){this.inputEl.focus()}watchValue(t,i){t!==i&&this.valueChange.emit(t)}updateIconSize(t){this.iconSize=t?20:24}adjustInputSize(){(this.rows>1||this.autoGrow)&&(this.inputEl.style.width="",this.inputEl.style.height="",this.inputEl.style.height=Boolean(this.inputEl.scrollHeight)?this.inputEl.scrollHeight/16+"rem":""),1!==this.rows||this.autoGrow||(this.inputEl.style.height="",this.inputEl.style.width="",!this.suffixLabel||"password"===this.type||this.disableDynamicWidth||Boolean(this.placeholder)||(this.inputEl.style.width=this.inputEl.scrollWidth/16+"rem"))}handleAutoSelect(t){this.autoSelect&&t.target.select()}render(){const t=1!==this.rows||this.autoGrow?"textarea":"input",i=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,r="number"===this.type&&!this.disabled&&!this.readonly,p="password"===this.type&&!this.disabled,a=this.clearable&&!this.disabled&&!this.readonly&&Boolean(this.value)&&!p&&!r&&!this.showCharacterCounter,u="password"===this.type&&this.showPassword?"text":this.type,o=n("text-input",`text-input--font-size-${this.fontSize}`,`text-input--type-${this.type}`,{"text-input--auto-grow":this.autoGrow,"text-input--clearable":this.clearable,"text-input--disable-dynamic-width":this.disableDynamicWidth||Boolean(this.placeholder),"text-input--has-suffix":Boolean(this.suffixLabel),"text-input--inline":this.inline,"text-input--show-password":"password"===this.type&&this.showPassword});return e(s,{key:"47932ba64512368fef5948a2560afdf722ae106c"},e("div",{key:"089210f7581a26934fa1851899e1b279c96a4f55",class:o},this.prefixLabel&&e("span",{key:"7d77cb2af315fe8909fa92f7ea328e4970c853fb",class:"text-input__prefix"},this.prefixLabel),e(t,{key:"1c73d0168a7ca0e7380b665c0e398b3dfb8be35b","aria-autocomplete":this.swirlAriaAutocomplete,"aria-controls":this.swirlAriaControls,"aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-expanded":this.swirlAriaExpanded,"aria-invalid":i,autoComplete:this.autoComplete,autoFocus:this.autoFocus,class:"text-input__input",disabled:this.disabled,inputMode:this.mode,maxLength:this.maxLength,max:"number"===this.type?this.max:void 0,min:"number"===this.type?this.min:void 0,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,onKeyPress:this.onKeyPress,placeholder:Boolean(this.suffixLabel)?void 0:this.placeholder,ref:t=>this.inputEl=t,required:this.required,role:this.swirlRole,name:this.inputName,rows:this.rows>1?this.rows:this.autoGrow?1:void 0,spellcheck:this.spellCheck,step:"number"===this.type?this.step:void 0,type:u,value:this.value,readonly:this.readonly},this.rows>1&&this.value),this.suffixLabel&&e("span",{key:"2ae0f456126a27f0256b5dfd851da830ea379018",class:"text-input__suffix"},this.suffixLabel),a&&e("button",{key:"ea47c05178f0ce61188ca8ed15f3bbe6f132b1dc","aria-label":this.clearButtonLabel,class:"text-input__clear-button",onClick:this.clear,part:"text-input__clear-button",type:"button"},e("swirl-icon-cancel",{key:"d419f462f82b28bc6c8602f3d4cf65d2649d0234",size:this.iconSize})),p&&e("button",{key:"565f3c92ef3fd90d1d43c673b94feec9bcf213cf","aria-label":this.passwordToggleLabel,class:"text-input__password-toggle",onClick:this.togglePassword,type:"button"},e(this.showPassword?"swirl-icon-visibility-off":"swirl-icon-visibility",{size:this.iconSize})),r&&e("span",{key:"ec02752a5258a06827fc156fd4b4cd5a0e712751",class:"text-input__stepper"},e("button",{key:"c698d2fda7bf64b338920410ef0c894955cf6372","aria-hidden":"true",class:"text-input__step-button",onClick:this.increaseValue,tabIndex:-1,type:"button"},e("swirl-icon-expand-less",{key:"0f662dd62d1a315d288622a31e4f0dfb0ee530e0",size:this.iconSize})),e("button",{key:"49fc4ece3d4b67e3b6fa38ecdb681edf5e2e0791","aria-hidden":"true",class:"text-input__step-button",onClick:this.decreaseValue,tabIndex:-1,type:"button"},e("swirl-icon-expand-more",{key:"49de410032a3f513ba78e7f6a986645441db80eb",size:this.iconSize}))),this.showCharacterCounter&&e("span",{key:"cc12de838a87f683af5ab14009cedcd1f98b39bb",class:"text-input__character-counter","aria-live":"polite"},e("swirl-visually-hidden",{key:"8df695b8970b8f35d7b119bff1cfe573c427f1e6"},this.characterCounterLabel),this.value?.length||0," ",Boolean(this.maxLength)?`/ ${this.maxLength}`:"")))}static get watchers(){return{value:["watchValue"]}}};p.style='.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--font-size-sm.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-sm.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--font-size-base.sc-swirl-text-input{--swirl-text-input-placeholder-size:var(--s-font-size-base);font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-base.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text-input--has-suffix.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:0.25rem;min-width:0.25rem}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-subdued);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type="number"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}';export{p as swirl_text_input}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r,h as a,F as t,H as o}from"./p-CWOhMVtL.js";import{c as e}from"./p-orsBiyT_.js";const s=class{constructor(a){r(this,a),this.borderColor="default",this.color="default",this.orientation="horizontal",this.semantics="separator",this.spacing="8"}componentWillLoad(){this.forceColor()}forceColor(){"default"!==this.borderColor&&(console.warn('[Swirl] The "borderColor" prop of swirl-separator is deprecated and will be removed with the next major release. Please use the "color" prop to achieve the same result.'),this.color=this.borderColor)}render(){const r="horizontal"===this.orientation?{paddingTop:`var(--s-space-${this.spacing})`,paddingBottom:`var(--s-space-${this.spacing})`}:{paddingRight:`var(--s-space-${this.spacing})`,paddingLeft:`var(--s-space-${this.spacing})`},s=e("separator",`separator--color-${this.color}`,`separator--orientation-${this.orientation}`);return a(o,{key:"23acb3a29638b92737838e75a54d7616e6c9150e",..."separator"===this.semantics?{"aria-orientation":this.orientation}:{},class:s,role:this.semantics,style:r},a("span",{key:"3ebf80f47fb36438403551f560db91ecf7d7e559",class:"separator__line"}),this.label&&a(t,{key:"84ac7960ba714ab27559751c11bd7c4b56ac3176"},a("span",{key:"6f8dc3ad3bde938789e28ad05c67da657262a4d1",class:"separator__label"},this.label),a("span",{key:"63ddb77ea887a890bb1731d12a939783b592e21a",class:"separator__line"})))}};s.style=":host{display:flex;width:100%;align-items:center;gap:var(--s-space-8)}:host *{box-sizing:border-box}:host(.separator--orientation-vertical){display:inline-flex;width:auto;flex-direction:column}:host(.separator--orientation-vertical) .separator__line{width:var(--s-border-width-default);height:100%;min-height:1.125rem}:host(.separator--color-critical) .separator__line{background-color:var(--s-border-critical)}:host(.separator--color-critical) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-strong) .separator__line{background-color:var(--s-border-strong)}:host(.separator--color-strong) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-highlight) .separator__line{background-color:var(--s-border-highlight)}:host(.separator--color-highlight) .separator__label{color:var(--s-text-highlight)}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-default)}.separator__label{flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:var(--s-font-size-sm);color:var(--s-text-disabled)}";export{s as swirl_separator}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as e,h as s,H as i,d as t}from"./p-CWOhMVtL.js";const a=class{constructor(s){e(this,s),this.separatorSpacing="4",this.spacing="0",this.hasSeparator=!1}render(){const e=this.el.closest('[role="grid"]')?"rowgroup":"listitem",t="listitem"===e?"list":void 0;return s(i,{key:"883825134d9bd2ef376418bbc4d5d522991bb62c"},this.hasSeparator&&s("swirl-separator",{key:"446341e2a3170b7c6bd2d5e48ba68f86b95b7076",spacing:this.separatorSpacing,semantics:"none"}),s("div",{key:"20bc260909c18c768fa433911ae7360f3c5a4bc7","aria-labelledby":"label",role:e},s("span",{key:"1c1af323bf34c0c38dd69cfc046c2d62776afa51",id:"label",class:"resource-list-section-label",part:"resource-list-section-label"},this.label),s("swirl-stack",{key:"41c2237588f8f98a3efa267479fc1fec815d6d8f",spacing:this.spacing,swirlAriaRole:t},s("slot",{key:"4844b6ac248e94b177e358a2dc608d84ed9c0f88"}))))}get el(){return t(this)}};a.style=":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-section-label{display:flex;padding:var(--s-space-8);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);font-size:var(--s-font-size-base);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-section-label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";export{a as swirl_resource_list_section}
|