@getflip/swirl-components 0.38.3 → 0.39.0

package/dist/collection/collection-manifest.json

@@ -18,6 +18,7 @@
     "./components/swirl-description-list-item/swirl-description-list-item.js",
     "./components/swirl-dialog/swirl-dialog.js",
     "./components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.js",
+    "./components/swirl-form-control/swirl-form-control.js",
     "./components/swirl-form-group/swirl-form-group.js",
     "./components/swirl-heading/swirl-heading.js",
     "./components/swirl-inline-error/swirl-inline-error.js",
@@ -61,7 +62,6 @@
     "./components/swirl-file-viewer/viewers/swirl-file-viewer-image/swirl-file-viewer-image.js",
     "./components/swirl-file-viewer/viewers/swirl-file-viewer-text/swirl-file-viewer-text.js",
     "./components/swirl-file-viewer/viewers/swirl-file-viewer-video/swirl-file-viewer-video.js",
-    "./components/swirl-form-control/swirl-form-control.js",
     "./components/swirl-icon/icons/swirl-icon-add-photo.js",
     "./components/swirl-icon/icons/swirl-icon-add.js",
     "./components/swirl-icon/icons/swirl-icon-admin-panel-settings.js",

package/dist/collection/components/swirl-form-control/swirl-form-control.css

@@ -59,6 +59,37 @@
     }
       }
 
+.form-control--label-position-outside {
+  padding-top: calc(var(--s-line-height-sm) + var(--s-space-4));
+}
+
+.form-control--label-position-outside .form-control__label {
+    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 .form-control__label {
+      min-height: calc(2.25rem + 2 * var(--s-border-width-default))
+  }
+    }
+
+.form-control--label-position-outside .form-control__label-text,
+  .form-control--label-position-outside:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select)
+    .form-control__label-text,
+  .form-control--label-position-outside:not(.form-control--has-value).form-control--is-select
+    .form-control__label-text {
+    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:not(.form-control--disabled) .form-control__label {
       border-color: var(--s-border-critical);
       box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-critical);

package/dist/collection/components/swirl-form-control/swirl-form-control.js

@@ -28,6 +28,7 @@ export class SwirlFormControl {
     this.inline = undefined;
     this.invalid = undefined;
     this.label = undefined;
+    this.labelPosition = "inside";
     this.hasFocus = undefined;
     this.inputValue = undefined;
   }
@@ -62,7 +63,7 @@ export class SwirlFormControl {
     if (!Boolean(this.inputEl)) {
       return;
     }
-    if (this.inline) {
+    if (this.inline || this.labelPosition === "outside") {
       this.inputEl.setAttribute("inline", "true");
     }
     else {
@@ -103,11 +104,11 @@ export class SwirlFormControl {
       ? this.inputValue.length > 0
       : Boolean(this.inputValue);
     const isSelect = this.inputEl.tagName === "SWIRL-SELECT";
-    const className = classnames("form-control", {
+    const className = classnames("form-control", `form-control--label-position-${this.labelPosition}`, {
       "form-control--disabled": this.disabled,
-      "form-control--inline": this.inline,
       "form-control--has-focus": this.hasFocus,
       "form-control--has-value": hasValue,
+      "form-control--inline": this.inline,
       "form-control--invalid": this.invalid,
       "form-control--is-select": isSelect,
     });
@@ -228,6 +229,29 @@ export class SwirlFormControl {
         },
         "attribute": "label",
         "reflect": false
+      },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlFormControlLabelPosition",
+          "resolved": "\"inside\" | \"outside\"",
+          "references": {
+            "SwirlFormControlLabelPosition": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-form-control/swirl-form-control.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "\"inside\""
       }
     };
   }

package/dist/collection/components/swirl-modal/swirl-modal.js

@@ -1,6 +1,6 @@
 import { h, Host, } from "@stencil/core";
-import A11yDialog from "a11y-dialog";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
+import * as focusTrap from "focus-trap";
 import classnames from "classnames";
 /**
  * slot - Modal contents
@@ -51,6 +51,7 @@ export class SwirlModal {
     this.padded = true;
     this.primaryActionLabel = undefined;
     this.secondaryActionLabel = undefined;
+    this.isOpen = false;
     this.closing = false;
     this.hasCustomHeader = undefined;
     this.scrollable = false;
@@ -58,22 +59,34 @@ export class SwirlModal {
     this.scrolledDown = false;
   }
   componentDidLoad() {
-    this.modal = new A11yDialog(this.modalEl);
+    this.focusTrap = focusTrap.createFocusTrap(this.modalEl, {
+      tabbableOptions: { getShadowRoot: (node) => node.shadowRoot },
+    });
     this.determineScrollStatus();
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.modal) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.focusTrap.deactivate();
     this.unlockBodyScroll();
   }
   onWindowResize() {
     this.determineScrollStatus();
   }
+  watchIsOpen() {
+    if (this.isOpen) {
+      // wait for animation
+      setTimeout(() => {
+        this.focusTrap.activate();
+      }, 200);
+    }
+    else {
+      this.focusTrap.deactivate();
+    }
+  }
   /**
    * Open the modal.
    */
   async open() {
-    this.modal.show();
+    this.isOpen = true;
     this.modalOpen.emit();
     this.lockBodyScroll();
     this.determineScrollStatus();
@@ -88,7 +101,7 @@ export class SwirlModal {
     this.closing = true;
     this.unlockBodyScroll();
     setTimeout(() => {
-      this.modal.hide();
+      this.isOpen = false;
       this.modalClose.emit();
       this.closing = false;
     }, 150);
@@ -109,10 +122,9 @@ export class SwirlModal {
       "modal--scrolled": this.scrolled,
       "modal--scrolled-down": this.scrolledDown,
     });
-    return (h(Host, null, h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "modal", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { class: "modal__body", role: "document", style: { maxWidth: this.maxWidth } }, !this.hideCloseButton && (h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), h("header", { class: "modal__custom-header" }, h("slot", { name: "custom-header", onSlotchange: this.onCustomHeaderSlotChange, ref: (el) => (this.customHeaderSlot = el) })), !this.hideLabel && (h("header", { class: "modal__header" }, h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label }))), h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", null)), showControls && (h("footer", { class: "modal__controls" }, h("swirl-button-group", { wrap: true }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
+    return (h(Host, null, h("section", { "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { class: "modal__body", style: { maxWidth: this.maxWidth } }, !this.hideCloseButton && (h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), h("header", { class: "modal__custom-header" }, h("slot", { name: "custom-header", onSlotchange: this.onCustomHeaderSlotChange, ref: (el) => (this.customHeaderSlot = el) })), !this.hideLabel && (h("header", { class: "modal__header" }, h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label }))), h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", null)), showControls && (h("footer", { class: "modal__controls" }, h("swirl-button-group", { wrap: true }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
   }
   static get is() { return "swirl-modal"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["swirl-modal.css"]
@@ -267,6 +279,7 @@ export class SwirlModal {
   }
   static get states() {
     return {
+      "isOpen": {},
       "closing": {},
       "hasCustomHeader": {},
       "scrollable": {},
@@ -381,6 +394,13 @@ export class SwirlModal {
       }
     };
   }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "isOpen",
+        "methodName": "watchIsOpen"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "resize",

package/dist/collection/components/swirl-text-input/swirl-text-input.js

@@ -154,7 +154,7 @@ export class SwirlTextInput {
       "text-input--inline": this.inline,
       "text-input--show-password": this.type === "password" && this.showPassword,
     });
-    return (h(Host, null, h("div", { class: className }, this.prefixLabel && (h("span", { class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { "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, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, rows: this.rows > 1 ? this.rows : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.rows === 1 ? this.value : undefined }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, type: "button" }, h("swirl-icon-cancel", { size: this.iconSize }))), showPasswordToggle && (h("button", { "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", { class: "text-input__stepper" }, h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { size: this.iconSize })), h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { size: this.iconSize })))), this.showCharacterCounter && (h("span", { class: "text-input__character-counter" }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+    return (h(Host, null, h("div", { class: className }, this.prefixLabel && (h("span", { class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { "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, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, rows: this.rows > 1 ? this.rows : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.rows === 1 ? this.value : undefined }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { size: this.iconSize }))), showPasswordToggle && (h("button", { "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", { class: "text-input__stepper" }, h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { size: this.iconSize })), h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { size: this.iconSize })))), this.showCharacterCounter && (h("span", { class: "text-input__character-counter" }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
   }
   static get is() { return "swirl-text-input"; }
   static get encapsulation() { return "scoped"; }