@getflip/swirl-components 0.38.3 → 0.39.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.
Files changed (33) hide show
  1. package/components.json +30 -3
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/swirl-components.cjs.js +1 -1
  4. package/dist/cjs/swirl-form-control.cjs.entry.js +5 -4
  5. package/dist/cjs/swirl-modal.cjs.entry.js +1165 -7
  6. package/dist/cjs/swirl-text-input.cjs.entry.js +1 -1
  7. package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
  8. package/dist/collection/collection-manifest.json +1 -1
  9. package/dist/collection/components/swirl-form-control/swirl-form-control.css +31 -0
  10. package/dist/collection/components/swirl-form-control/swirl-form-control.js +27 -3
  11. package/dist/collection/components/swirl-modal/swirl-modal.js +28 -8
  12. package/dist/collection/components/swirl-text-input/swirl-text-input.js +1 -1
  13. package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
  14. package/dist/components/swirl-form-control.js +6 -4
  15. package/dist/components/swirl-modal.js +1167 -9
  16. package/dist/components/swirl-text-input2.js +1 -1
  17. package/dist/esm/loader.js +1 -1
  18. package/dist/esm/swirl-components.js +1 -1
  19. package/dist/esm/swirl-form-control.entry.js +5 -4
  20. package/dist/esm/swirl-modal.entry.js +1166 -8
  21. package/dist/esm/swirl-text-input.entry.js +1 -1
  22. package/dist/swirl-components/p-9d64ed48.entry.js +1 -0
  23. package/dist/swirl-components/p-a7db763e.entry.js +1 -0
  24. package/dist/swirl-components/p-e08f253d.entry.js +10 -0
  25. package/dist/swirl-components/swirl-components.esm.js +1 -1
  26. package/dist/types/components/swirl-form-control/swirl-form-control.d.ts +2 -0
  27. package/dist/types/components/swirl-modal/swirl-modal.d.ts +4 -1
  28. package/dist/types/components.d.ts +4 -0
  29. package/package.json +1 -1
  30. package/vscode-data.json +12 -0
  31. package/dist/swirl-components/p-0cb23149.entry.js +0 -1
  32. package/dist/swirl-components/p-4f7f5e02.entry.js +0 -1
  33. package/dist/swirl-components/p-66782dbd.entry.js +0 -1
package/dist/components/swirl-form-control.js CHANGED
@@ -3,7 +3,7 @@ import { c as classnames } from './index2.js';
3
3
  import { d as defineCustomElement$3 } from './swirl-icon-error2.js';
4
4
  import { d as defineCustomElement$2 } from './swirl-inline-error2.js';
5
5
 
6
- 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{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) .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) .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);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) .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 .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{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);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--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__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 .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.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__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);white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.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);padding-left:var(--s-space-4)}";
6
+ 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{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) .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) .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);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) .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 .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{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);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--label-position-outside.sc-swirl-form-control{padding-top:calc(var(--s-line-height-sm) + var(--s-space-4))}.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) .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--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__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 .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.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__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);white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.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);padding-left:var(--s-space-4)}";
7
7
 
8
8
  const SwirlFormControl$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
9
9
  constructor() {
@@ -32,6 +32,7 @@ const SwirlFormControl$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
32
32
  this.inline = undefined;
33
33
  this.invalid = undefined;
34
34
  this.label = undefined;
35
+ this.labelPosition = "inside";
35
36
  this.hasFocus = undefined;
36
37
  this.inputValue = undefined;
37
38
  }
@@ -66,7 +67,7 @@ const SwirlFormControl$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
66
67
  if (!Boolean(this.inputEl)) {
67
68
  return;
68
69
  }
69
- if (this.inline) {
70
+ if (this.inline || this.labelPosition === "outside") {
70
71
  this.inputEl.setAttribute("inline", "true");
71
72
  }
72
73
  else {
@@ -107,11 +108,11 @@ const SwirlFormControl$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
107
108
  ? this.inputValue.length > 0
108
109
  : Boolean(this.inputValue);
109
110
  const isSelect = this.inputEl.tagName === "SWIRL-SELECT";
110
- const className = classnames("form-control", {
111
+ const className = classnames("form-control", `form-control--label-position-${this.labelPosition}`, {
111
112
  "form-control--disabled": this.disabled,
112
- "form-control--inline": this.inline,
113
113
  "form-control--has-focus": this.hasFocus,
114
114
  "form-control--has-value": hasValue,
115
+ "form-control--inline": this.inline,
115
116
  "form-control--invalid": this.invalid,
116
117
  "form-control--is-select": isSelect,
117
118
  });
@@ -133,6 +134,7 @@ const SwirlFormControl$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
133
134
  "inline": [4],
134
135
  "invalid": [4],
135
136
  "label": [1],
137
+ "labelPosition": [1, "label-position"],
136
138
  "hasFocus": [32],
137
139
  "inputValue": [32]
138
140
  }, [[8, "click", "onWindowClick"]]]);