@getflip/swirl-components 0.3.1 → 0.5.0

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

@@ -6,7 +6,9 @@ export class FlipModal {
   constructor() {
     this.closeButtonLabel = "Close modal";
     this.closing = false;
+    this.scrollable = false;
     this.scrolled = false;
+    this.scrolledDown = false;
     this.onKeyDown = (event) => {
       if (event.code === "Escape") {
         this.close();
@@ -20,18 +22,24 @@ export class FlipModal {
     };
     this.onPrimaryAction = (event) => {
       this.primaryAction.emit(event);
-      this.close();
     };
     this.onSecondaryAction = (event) => {
       this.secondaryAction.emit(event);
-      this.close();
     };
     this.determineScrollStatus = () => {
-      var _a;
+      var _a, _b, _c, _d, _e, _f;
       const scrolled = ((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.scrollTop) > 0;
+      const scrolledDown = Math.ceil(((_b = this.scrollContainer) === null || _b === void 0 ? void 0 : _b.scrollTop) + ((_c = this.scrollContainer) === null || _c === void 0 ? void 0 : _c.offsetHeight)) >= ((_d = this.scrollContainer) === null || _d === void 0 ? void 0 : _d.scrollHeight);
+      const scrollable = ((_e = this.scrollContainer) === null || _e === void 0 ? void 0 : _e.scrollHeight) > ((_f = this.scrollContainer) === null || _f === void 0 ? void 0 : _f.offsetHeight);
       if (scrolled !== this.scrolled) {
         this.scrolled = scrolled;
       }
+      if (scrolledDown !== this.scrolledDown) {
+        this.scrolledDown = scrolledDown;
+      }
+      if (scrollable !== this.scrollable) {
+        this.scrollable = scrollable;
+      }
     };
   }
   componentDidLoad() {
@@ -51,6 +59,7 @@ export class FlipModal {
    */
   async open() {
     this.modal.show();
+    this.modalOpen.emit();
     this.lockBodyScroll();
     this.determineScrollStatus();
   }
@@ -65,6 +74,7 @@ export class FlipModal {
     this.unlockBodyScroll();
     setTimeout(() => {
       this.modal.hide();
+      this.modalClose.emit();
       this.closing = false;
     }, 150);
   }
@@ -77,7 +87,9 @@ export class FlipModal {
   render() {
     const className = classnames("modal", {
       "modal--closing": this.closing,
+      "modal--scrollable": this.scrollable,
       "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) },
@@ -174,9 +186,41 @@ export class FlipModal {
   }; }
   static get states() { return {
     "closing": {},
-    "scrolled": {}
+    "scrollable": {},
+    "scrolled": {},
+    "scrolledDown": {}
   }; }
   static get events() { return [{
+      "method": "modalClose",
+      "name": "modalClose",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "modalOpen",
+      "name": "modalOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
       "method": "primaryAction",
       "name": "primaryAction",
       "bubbles": true,
@@ -257,4 +301,3 @@ export class FlipModal {
       "passive": true
     }]; }
 }
-//# sourceMappingURL=flip-modal.js.map

package/dist/collection/components/flip-modal/flip-modal.stories.js

@@ -57,4 +57,3 @@ FlipModal.args = {
   primaryActionLabel: "Primary",
   secondaryActionLabel: "Secondary",
 };
-//# sourceMappingURL=flip-modal.stories.js.map

package/dist/collection/components/flip-option-list/flip-option-list.js

@@ -23,7 +23,7 @@ export class FlipOptionList {
         event.preventDefault();
         this.focusPreviousItem();
       }
-      else if (event.code === "Space") {
+      else if (event.code === "Space" || event.code === "Enter") {
         event.preventDefault();
         this.selectFocusedItem();
       }
@@ -44,11 +44,16 @@ export class FlipOptionList {
     };
   }
   componentDidLoad() {
-    this.items = querySelectorAllDeep(this.el, "flip-option-list-item");
+    this.updateItems();
+    this.observeSlotChanges();
     this.setItemDisabledState();
     this.setItemContext();
     this.syncItemsWithValue();
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
   watchDisabled() {
     this.setItemDisabledState();
   }
@@ -58,6 +63,15 @@ export class FlipOptionList {
   watchValue() {
     this.syncItemsWithValue();
   }
+  observeSlotChanges() {
+    this.observer = new MutationObserver(() => {
+      this.updateItems();
+    });
+    this.observer.observe(this.listboxEl, { childList: true });
+  }
+  updateItems() {
+    this.items = querySelectorAllDeep(this.el, "flip-option-list-item");
+  }
   setItemDisabledState() {
     this.items.forEach((item) => (item.disabled = this.disabled));
   }
@@ -77,6 +91,9 @@ export class FlipOptionList {
       return;
     }
     const item = this.items[index];
+    if (item.disabled) {
+      return;
+    }
     const itemIsAlreadySelected = this.value.includes(item.value);
     if (!this.multiSelect) {
       this.value = [];
@@ -117,8 +134,10 @@ export class FlipOptionList {
     if (this.disabled) {
       return;
     }
-    this.items.forEach((item) => item.shadowRoot.children[0].removeAttribute("tabIndex"));
-    const item = this.items[index].shadowRoot.children[0];
+    this.items.forEach((item) => item.shadowRoot
+      .querySelector('[role="option"]')
+      .removeAttribute("tabIndex"));
+    const item = this.items[index].shadowRoot.querySelector('[role="option"]');
     if (!Boolean(item)) {
       return;
     }
@@ -140,7 +159,7 @@ export class FlipOptionList {
   }
   getActiveItemIndex() {
     return this.items
-      .map((item) => item.shadowRoot.children[0])
+      .map((item) => item.shadowRoot.querySelector('[role="option"]'))
       .findIndex((item) => {
       var _a, _b;
       return item === document.activeElement ||
@@ -152,11 +171,11 @@ export class FlipOptionList {
     const ariaMultiselectable = this.multiSelect ? "true" : undefined;
     const tabIndex = this.disabled ? -1 : 0;
     return (h(Host, null,
-      h("div", { "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", onClick: this.onClick, onFocus: this.onFocus, onKeyDown: this.onKeyDown, role: "listbox", tabIndex: tabIndex },
+      h("div", { "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex },
         h("slot", null))));
   }
   static get is() { return "flip-option-list"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["flip-option-list.css"]
   }; }
@@ -198,6 +217,23 @@ export class FlipOptionList {
       "attribute": "label",
       "reflect": false
     },
+    "optionListId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "option-list-id",
+      "reflect": false
+    },
     "multiSelect": {
       "type": "boolean",
       "mutable": false,
@@ -260,4 +296,3 @@ export class FlipOptionList {
       "methodName": "watchValue"
     }]; }
 }
-//# sourceMappingURL=flip-option-list.js.map

package/dist/collection/components/flip-option-list/flip-option-list.stories.js

@@ -28,4 +28,3 @@ FlipOptionList.args = {
   label: "Option List",
   value: ["2"],
 };
-//# sourceMappingURL=flip-option-list.stories.js.map

package/dist/collection/components/flip-option-list-item/flip-option-list-item.js

@@ -153,4 +153,3 @@ export class FlipOptionListItem {
     }
   }; }
 }
-//# sourceMappingURL=flip-option-list-item.js.map

package/dist/collection/components/flip-option-list-item/flip-option-list-item.stories.js

@@ -23,4 +23,3 @@ FlipOptionListItem.args = {
   label: "Option List Item",
   value: "Value",
 };
-//# sourceMappingURL=flip-option-list-item.stories.js.map

package/dist/collection/components/flip-option-list-section/flip-option-list-section.js

@@ -38,4 +38,3 @@ export class FlipOptionListSection {
     }
   }; }
 }
-//# sourceMappingURL=flip-option-list-section.js.map

package/dist/collection/components/flip-option-list-section/flip-option-list-section.stories.js

@@ -26,4 +26,3 @@ export const FlipOptionListSection = Template.bind({});
 FlipOptionListSection.args = {
   label: "Section label",
 };
-//# sourceMappingURL=flip-option-list-section.stories.js.map

package/dist/collection/components/flip-pagination/flip-pagination.js

@@ -267,4 +267,3 @@ export class FlipPagination {
       }
     }]; }
 }
-//# sourceMappingURL=flip-pagination.js.map

package/dist/collection/components/flip-pagination/flip-pagination.stories.js

@@ -19,4 +19,3 @@ FlipPagination.args = {
   page: 1,
   pages: 20,
 };
-//# sourceMappingURL=flip-pagination.stories.js.map

package/dist/collection/components/flip-pdf-reader/flip-pdf-reader.css

@@ -0,0 +1,245 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.pdf-reader {
+  position: fixed;
+  z-index: var(--s-z-40);
+  background-color: var(--s-surface-raised-default);
+  inset: 0;
+  touch-action: pan-x pan-y;
+}
+
+.pdf-reader[aria-hidden="true"] {
+    display: none;
+  }
+
+.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body {
+    -webkit-animation: 0.15s pdf-reader-fade-in;
+            animation: 0.15s pdf-reader-fade-in;
+  }
+
+@media (prefers-reduced-motion) {
+
+.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body {
+      -webkit-animation: none;
+              animation: none
+  }
+    }
+
+.pdf-reader--closing {
+  -webkit-animation: 0.15s pdf-reader-fade-out;
+          animation: 0.15s pdf-reader-fade-out;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+
+@media (prefers-reduced-motion) {
+
+.pdf-reader--closing {
+    -webkit-animation: none;
+            animation: none
+}
+  }
+
+.pdf-reader__body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.pdf-reader__header {
+  display: flex;
+  height: 4rem;
+  padding-right: var(--s-space-16);
+  padding-left: var(--s-space-16);
+  align-items: center;
+  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
+  background-color: var(--s-background-default);
+  gap: var(--s-space-8);
+}
+
+.pdf-reader__header-left,
+.pdf-reader__header-right {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  gap: var(--s-space-8);
+}
+
+@media (min-width: 768px) {
+
+.pdf-reader__header-left,
+.pdf-reader__header-right {
+    flex-basis: calc(100 / 3 * 1%);
+    flex-grow: 0
+}
+  }
+
+.pdf-reader__header-right {
+  justify-content: flex-end;
+}
+
+.pdf-reader__header-center {
+  display: none;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+  align-items: center;
+  gap: var(--s-space-16);
+}
+
+@media (min-width: 768px) {
+
+.pdf-reader__header-center {
+    display: flex
+}
+  }
+
+.pdf-reader__label {
+  overflow: hidden;
+  flex-grow: 1;
+  font-weight: var(--s-font-weight-semibold);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.pdf-reader__zoom-button-container {
+  display: flex;
+  align-items: center;
+  gap: var(--s-space-8);
+}
+
+.pdf-reader__zoom-button-container > *:not(:last-child) {
+    position: relative;
+  }
+
+.pdf-reader__zoom-button-container > *:not(:last-child):after {
+      position: absolute;
+      top: 50%;
+      right: calc(-1 * var(--s-space-4));
+      width: var(--s-border-width-default);
+      height: 1.5rem;
+      background-color: var(--s-border-default);
+      content: "";
+      transform: translate3d(50%, -50%, 0);
+    }
+
+.pdf-reader__zoom-select-container {
+  position: relative;
+}
+
+.pdf-reader__zoom-select {
+  display: inline-flex;
+  height: 2.5rem;
+  padding-right: var(--s-space-12);
+  padding-right: calc(var(--s-space-8) + 1.5rem + var(--s-space-12));
+  padding-left: var(--s-space-12);
+  justify-content: flex-start;
+  align-items: center;
+  border: var(--s-border-width-default) solid var(--s-border-default);
+  border-radius: var(--s-border-radius-sm);
+  color: var(--s-interactive-neutral-default);
+  background-color: transparent;
+  font: inherit;
+  font-weight: var(--s-font-weight-medium);
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.pdf-reader__zoom-select:focus {
+    outline-color: var(--s-focus-default);
+  }
+
+.pdf-reader__zoom-select-icon {
+  position: absolute;
+  top: 50%;
+  right: var(--s-space-8);
+  display: inline-flex;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.pdf-reader__content {
+  width: 100%;
+  height: calc(100% - 4rem);
+}
+
+.pdf-reader__mobile-zoom-controls {
+  position: absolute;
+  z-index: 1;
+  right: var(--s-space-16);
+  bottom: var(--s-space-32);
+  display: flex;
+  padding-bottom: var(--s-space-4);
+  flex-direction: column;
+  gap: var(--s-space-8);
+}
+
+@media (min-width: 768px) {
+
+.pdf-reader__mobile-zoom-controls {
+    display: none
+}
+  }
+
+.pdf-reader__mobile-zoom-button {
+  display: inline-flex;
+  width: 2.5rem;
+  height: 2.5rem;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: 50%;
+  color: var(--s-icon-on-image);
+  background-color: rgba(0, 0, 0, 0.6);
+  cursor: pointer;
+  transition: opacity 0.15s;
+  pointer-events: auto;
+}
+
+.pdf-reader__mobile-zoom-button:disabled {
+    cursor: default;
+  }
+
+@-webkit-keyframes pdf-reader-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes pdf-reader-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes pdf-reader-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes pdf-reader-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}