@scouterna/ui-webc 3.1.0 → 4.0.0

package/dist/collection/components/drawer/drawer.css

@@ -0,0 +1,157 @@
+.drawer {
+  width: 100%;
+}
+/**
+ * Mobile style
+ */
+.drawer--container {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: 90%;
+  width: 100%;
+  transform: translateY(100%);
+  background-color: #fefefe;
+  box-shadow: 0 0 20px 3px var(--color-gray-200);
+  border-top-left-radius: var(--spacing-5);
+  border-top-right-radius: var(--spacing-5);
+  overflow: hidden;
+  margin: 0;
+  z-index: 101;
+}
+@keyframes drawerOpen {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes drawerClose {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+.open {
+  animation: drawerOpen 0.3s ease-in-out forwards;
+}
+.close {
+  animation: drawerClose 0.3s ease-in-out forwards;
+}
+/**
+ * Desktop style
+ */
+@media screen and (min-width: 901px) {
+  @keyframes drawerOpen {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+  @keyframes drawerClose {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  .drawer--container {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: auto;
+    left: initial;
+    height: 100%;
+    max-height: 100%;
+    max-width: 90%;
+    min-height: 600px;
+    width: 430px;
+    transform: translateX(100%);
+    border-top-left-radius: var(--spacing-5);
+    border-bottom-left-radius: var(--spacing-5);
+    border-top-right-radius: 0;
+  }
+  .open {
+    animation: drawerOpen 0.3s ease-in-out forwards;
+  }
+  .close {
+    animation: drawerClose 0.3s ease-in-out forwards;
+  }
+}
+/* Backdrop styles */
+.backdrop {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  transition: opacity 0.2s;
+  z-index: 100;
+}
+.backdrop-hidden {
+  opacity: 0;
+}
+.backdrop-visible {
+  opacity: 0.6;
+  pointer-events: all;
+  background-color: var(--color-gray-200);
+}
+/**
+ * Header styles
+ */
+.header--wrapper {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: var(--spacing-20);
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.heading {
+  font: var(--type-body-lg);
+  font-weight: 600;
+  color: var(--color-text-base);
+}
+.content--wrapper {
+  padding: 0 var(--spacing-7);
+}
+button {
+  z-index: 2;
+  pointer-events: all;
+  cursor: pointer;
+  background: none;
+  box-shadow: none;
+  position: absolute;
+  border: none;
+  /*top: calc(50% - 24px);*/
+  width: 24px;
+  height: 24px;
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.exit-button {
+  right: var(--spacing-3);
+}
+.back-button {
+  left: var(--spacing-3);
+}
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

package/dist/collection/components/drawer/drawer.js

@@ -0,0 +1,323 @@
+import { h, } from "@stencil/core";
+import focusLock from "dom-focus-lock";
+const backIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M5 12l6 6" /><path d="M5 12l6 -6" /></svg>';
+const exitIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>';
+export class ScoutDrawer {
+    rootElement;
+    /**
+     * Open/close state of the drawer.
+     */
+    open = false;
+    /**
+     * Heading within the sheet.
+     */
+    heading = "";
+    /**
+     * Render back button.
+     */
+    showBackButton = false;
+    /**
+     * Back button label.
+     */
+    backButtonLabel = "";
+    /**
+     * Render exit button.
+     */
+    showExitButton = false;
+    /**
+     * Exit button label.
+     */
+    exitButtonLabel = "";
+    /**
+     * Disable backdrop for the drawer.
+     */
+    disableBackdrop = false;
+    /**
+     * Disable drawer content padding. Use only if you have specific use case and you need to use full width.
+     */
+    disableContentPadding = false;
+    drawerState = "closed";
+    focusedNode = null;
+    componentWillLoad() {
+        this.focusedNode = document.activeElement;
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.setDrawerOpenState(true);
+        }
+    }
+    disconnectedCallback() {
+        this.focusedNode;
+    }
+    /**
+     * Fired when clicking backButton (<-)
+     */
+    backButtonClicked;
+    /**
+     * Fired when clicking backButton (X). Also sent when clicking the backdrop.
+     */
+    exitButtonClicked;
+    onBackButtonClick() {
+        this.backButtonClicked.emit();
+    }
+    onExitButtonClick() {
+        this.exitButtonClicked.emit();
+    }
+    setDrawerOpenState(open) {
+        const drawer = this.rootElement.shadowRoot.querySelector(".drawer--container");
+        if (!drawer) {
+            this.drawerState = open ? "opening" : "closing";
+        }
+        if (open) {
+            this.drawerState = "opening";
+            focusLock.on(drawer);
+        }
+        else {
+            focusLock.off(drawer);
+            this.drawerState = "closing";
+        }
+    }
+    render() {
+        const shouldRenderHeader = this.heading || this.showBackButton || this.showExitButton;
+        const getDrawerStateClass = (state) => {
+            switch (state) {
+                case "opening":
+                case "open":
+                    return "open";
+                case "closing":
+                    return "close";
+            }
+        };
+        return (h("div", { class: "drawer" }, !this.disableBackdrop && (
+        // biome-ignore lint/a11y/noStaticElementInteractions: <closable backdrop>
+        // biome-ignore lint/a11y/useKeyWithClickEvents: <closable backdrop>
+        h("div", { onClick: () => {
+                this.onExitButtonClick();
+            }, class: `backdrop ${this.drawerState !== "closed" ? "backdrop-visible" : "backdrop-hidden"}` })), h("div", { class: `drawer--container ${getDrawerStateClass(this.drawerState)}`, onAnimationEnd: () => {
+                this.drawerState = this.open ? "open" : "closed";
+            } }, shouldRenderHeader && (h("div", { class: "header--wrapper" }, this.showBackButton && (h("button", { type: "button", class: "back-button", onClick: () => this.onBackButtonClick() }, h("span", { class: "icon", innerHTML: backIcon }), h("span", { class: "visually-hidden" }, this.backButtonLabel))), this.showExitButton && (h("button", { type: "button", class: "exit-button", onClick: () => this.onExitButtonClick() }, h("span", { class: "icon", innerHTML: exitIcon }), h("span", { class: "visually-hidden" }, this.exitButtonLabel))), this.heading && h("h3", { class: "heading" }, this.heading))), h("div", { class: !this.disableContentPadding && `content--wrapper` }, h("slot", null)))));
+    }
+    static get is() { return "scout-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["drawer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Open/close state of the drawer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading within the sheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "\"\""
+            },
+            "showBackButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render back button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-back-button",
+                "defaultValue": "false"
+            },
+            "backButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Back button label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "back-button-label",
+                "defaultValue": "\"\""
+            },
+            "showExitButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render exit button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-exit-button",
+                "defaultValue": "false"
+            },
+            "exitButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exit button label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "exit-button-label",
+                "defaultValue": "\"\""
+            },
+            "disableBackdrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable backdrop for the drawer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-backdrop",
+                "defaultValue": "false"
+            },
+            "disableContentPadding": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable drawer content padding. Use only if you have specific use case and you need to use full width."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-content-padding",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "drawerState": {},
+            "focusedNode": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "backButtonClicked",
+                "name": "backButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when clicking backButton (<-)"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "exitButtonClicked",
+                "name": "exitButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when clicking backButton (X). Also sent when clicking the backdrop."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "rootElement"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "setDrawerOpenState"
+            }];
+    }
+}

package/dist/collection/components/list-view/list-view.css

@@ -1,5 +1,10 @@
-:host {
+/* :host {
+} */
+
+.list {
+  width: 100%;
   display: flex;
   flex-direction: column;
-  padding: var(--spacing-2) 0;
+  padding: var(--spacing-2);
+  gap: 2px;
 }

package/dist/collection/components/list-view/list-view.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 export class ScoutListView {
     el;
     onScoutChecked(event) {
@@ -9,8 +9,8 @@ export class ScoutListView {
         const listItems = this.el.querySelectorAll("scout-list-view-item");
         const otherRadios = [];
         listItems.forEach((item) => {
-            const radios = item.shadowRoot.querySelectorAll(`input[type="radio"][name="${CSS.escape(element.name)}"]`);
-            radios.forEach((r) => {
+            const radios = item.shadowRoot?.querySelectorAll(`input[type="radio"][name="${CSS.escape(element.name)}"]`);
+            radios?.forEach((r) => {
                 if (r !== element) {
                     otherRadios.push(r);
                 }
@@ -21,7 +21,9 @@ export class ScoutListView {
         }
     }
     render() {
-        return (h(Host, { key: '68c7e8924c60ba15c6c8a64724eebeea1731909f', role: "list" }, h("slot", { key: '7b686b0f83c138ab0d497f9b6a0d7d5927bce63c' })));
+        return (
+        // biome-ignore lint/a11y/useSemanticElements: custom-elements are not allowed as children of a <ul>
+        h("div", { key: 'a2c79ce8e0fe8028cb7b093f6bf64961a0ef4d05', class: "list", role: "list" }, h("slot", { key: '6a147fbbb385c80325211e9cb009b6af0678dbb6' })));
     }
     static get is() { return "scout-list-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list-view-item/list-view-item.css

@@ -9,17 +9,29 @@
   text-align: inherit;
   min-height: var(--spacing-12);
   color: var(--color-text-base);
-  padding: var(--spacing-2) var(--spacing-4);
+  padding: var(--spacing-4) var(--spacing-4);
   cursor: pointer;
-  border: none;
-  background-color: transparent;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  background-color: var(--color-white);
   -webkit-text-decoration: none;
   text-decoration: none;
+  border-radius: 6px;
+}
+
+:host(:first-of-type) .button {
+  border-top-left-radius: var(--spacing-4);
+  border-top-right-radius: var(--spacing-4);
+}
+
+:host(:last-of-type) .button {
+  border-bottom-left-radius: var(--spacing-4);
+  border-bottom-right-radius: var(--spacing-4);
 }
 
 @media (hover: hover) {
   .button:hover {
     background-color: var(--color-background-brand-subtle-hovered);
+    border-color: rgba(0, 0, 0, 0.03);
   }
 }
 
@@ -38,7 +50,7 @@
 
 .prefix-icon {
   justify-content: flex-start;
-  width: var(--spacing-14);
+  width: var(--spacing-10);
 }
 
 .suffix-icon {

package/dist/collection/components/list-view-item/list-view-item.js

@@ -1,9 +1,16 @@
 import { Host, h, } from "@stencil/core";
+import ChevronRightIcon from "@tabler/icons/outline/chevron-right.svg";
 export class ScoutListViewItem {
     icon;
     primary;
     secondary;
     type = "button";
+    /**
+     * The action to display on the right side of the item. For example, a
+     * chevron. This is purely visual and does not affect the behavior of the item
+     * in any way. Not visible when the type is "radio" or "checkbox".
+     */
+    action = null;
     href;
     target;
     rel;
@@ -27,7 +34,7 @@ export class ScoutListViewItem {
                     (this.target === "_blank" ? "noopener noreferrer" : undefined),
             }
             : {};
-        return (h(Host, { key: '329bcf60c9b9df6af329d833500b673f3de7e0ff', role: "listitem" }, h(Tag, { key: '864c0c388e72a544afac7b73dc715fc992f913aa', class: "button", ...linkProps, onClick: () => this.scoutClick.emit() }, this.getPrefix(), this.getContent(), this.getSuffix())));
+        return (h(Host, { key: 'a91a63b4ed66f3ea5139f83d0024b342cd7095d1', role: "listitem" }, h(Tag, { key: '9c4e5c7e24c0f152f5e13b77a91c9eff0f73192d', class: "button", ...linkProps, onClick: () => this.scoutClick.emit() }, this.getPrefix(), this.getContent(), this.getSuffix())));
     }
     getPrefix() {
         if (!this.icon) {
@@ -45,6 +52,9 @@ export class ScoutListViewItem {
         if (this.type === "checkbox") {
             return (h("scout-checkbox", { name: this.name, value: this.value, checked: this.checked, disabled: this.disabled }));
         }
+        if (this.action === "chevron") {
+            return (h("div", { class: "suffix-icon" }, h("div", { class: "icon", style: { "--icon": `url(${ChevronRightIcon})` } })));
+        }
         return null;
     }
     static get is() { return "scout-list-view-item"; }
@@ -145,6 +155,32 @@ export class ScoutListViewItem {
                 "attribute": "type",
                 "defaultValue": "\"button\""
             },
+            "action": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ActionType",
+                    "resolved": "\"chevron\"",
+                    "references": {
+                        "ActionType": {
+                            "location": "local",
+                            "path": "/home/runner/work/j26-components/j26-components/packages/ui-webc/src/components/list-view-item/list-view-item.tsx",
+                            "id": "src/components/list-view-item/list-view-item.tsx::ActionType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The action to display on the right side of the item. For example, a\nchevron. This is purely visual and does not affect the behavior of the item\nin any way. Not visible when the type is \"radio\" or \"checkbox\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action",
+                "defaultValue": "null"
+            },
             "href": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/segmented-control/segmented-control.css

@@ -0,0 +1,68 @@
+:host {
+  position: relative;
+  width: 100%;
+  display: flex;
+  height: var(--spacing-10);
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--spacing-2);
+  font: var(--type-body-md);
+  padding: 0 0.125rem;
+  padding: 0 var(--indicator-padding);
+
+  --indicator-padding: 0.125rem;
+  --button-padding: var(--spacing-3);
+}
+
+:host(.small) {
+  height: var(--spacing-8);
+  font: var(--type-body-sm);
+
+  --button-padding: var(--spacing-2);
+}
+
+.indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  transition: all 0.2s ease;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.indicator::after {
+    content: "";
+    position: absolute;
+    top: var(--indicator-padding);
+    left: 0;
+    right: 0;
+    bottom: var(--indicator-padding);
+    border-radius: 0.375rem;
+    background-color: var(--color-background-brand-base);
+  }
+
+::slotted(button) {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--button-padding);
+  font-size: var(--font-size-2);
+  color: var(--color-text-default);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 0.15s ease;
+  position: relative;
+  z-index: 1;
+}
+
+::-csstools-invalid-slotted(button):disabled {
+    color: var(--color-text-disabled);
+    cursor: not-allowed;
+  }
+
+::slotted(button[aria-checked="true"]) {
+  color: var(--color-text-brand-inverse);
+}