distディレクトリを更新

dist/components/dropdownAction/dropdown-action-button.css

@@ -0,0 +1,5 @@
+.base {
+  min-width: 80px;
+  width: 100%;
+  flex-direction: row-reverse;
+}

dist/components/dropdownAction/dropdown-action-item.css

@@ -0,0 +1,22 @@
+.action {
+  display: block;
+  width: 100%;
+  min-height: 26px;
+  padding-inline: 8px;
+  padding-block: 3.5px;
+  background: none;
+  border: 0;
+  color: var(--color-semantic-text-regular);
+  font-size: 12px;
+  text-align: left;
+  line-height: 1.6;
+}
+
+.action:hover,
+.action:focus {
+  background: var(--color-semantic-surface-regular-3);
+}
+
+.base {
+  margin: 0;
+}

dist/components/dropdownAction/dropdown-action.css

@@ -0,0 +1,25 @@
+.base {
+  position: relative;
+}
+
+.menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-block-start: 8px;
+  padding-block: 8px;
+  background: var(--color-semantic-surface-regular-1);
+  border: 1px solid var(--color-semantic-border-regular);
+  border-radius: 5px;
+  box-shadow: 0 3px 12px 0 var(--color-semantic-elevation-regular);
+}
+
+.menu.position__left {
+  left: 0;
+  right: auto;
+}
+
+.menu.position__right {
+  left: auto;
+  right: 0;
+}

dist/components/dropdownAction/sp-dropdown-action-button.d.ts

@@ -0,0 +1,15 @@
+import { SpButton } from "../button/sp-button";
+import "../icon/sp-icon";
+export declare class SpDropdownActionButton extends SpButton {
+    constructor();
+    connectedCallback(): void;
+    setAriaHasPopup(value: string): void;
+    setAriaExpanded(value: string): void;
+    setAriaControls(value: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-dropdown-action-button": SpDropdownActionButton;
+    }
+}
+//# sourceMappingURL=sp-dropdown-action-button.d.ts.map

dist/components/dropdownAction/sp-dropdown-action-button.js

@@ -0,0 +1,36 @@
+import { SpButton } from "../button/sp-button";
+// @ts-ignore
+import foundationStyle from "../foundation.css?inline" assert { type: "css" };
+// @ts-ignore
+import buttonStyle from "../button/button.css?inline" assert { type: "css" };
+// @ts-ignore
+import dropdownActionButtonStyle from "./dropdown-action-button.css?inline" assert { type: "css" };
+import "../icon/sp-icon";
+const styles = new CSSStyleSheet();
+styles.replaceSync(`${foundationStyle} ${buttonStyle} ${dropdownActionButtonStyle}`);
+export class SpDropdownActionButton extends SpButton {
+    constructor() {
+        super();
+        if (this.shadowRoot) {
+            this.shadowRoot.adoptedStyleSheets = [
+                ...this.shadowRoot.adoptedStyleSheets,
+                styles,
+            ];
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.icon = "arrow_down";
+    }
+    setAriaHasPopup(value) {
+        this.buttonElement.setAttribute("aria-haspopup", value);
+    }
+    setAriaExpanded(value) {
+        this.buttonElement.setAttribute("aria-expanded", value);
+    }
+    setAriaControls(value) {
+        this.buttonElement.setAttribute("aria-controls", value);
+    }
+}
+customElements.get("sp-dropdown-action-button") ||
+    customElements.define("sp-dropdown-action-button", SpDropdownActionButton);

dist/components/dropdownAction/sp-dropdown-action-item.d.ts

@@ -0,0 +1,10 @@
+export declare class SpDropdownActionItem extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-dropdown-action-item": SpDropdownActionItem;
+    }
+}
+//# sourceMappingURL=sp-dropdown-action-item.d.ts.map

dist/components/dropdownAction/sp-dropdown-action-item.js

@@ -0,0 +1,26 @@
+// @ts-ignore
+import foundationStyle from "../foundation.css?inline" assert { type: "css" };
+// @ts-ignore
+import dropdownActionItemStyle from "./dropdown-action-item.css?inline" assert { type: "css" };
+const styles = new CSSStyleSheet();
+styles.replaceSync(`${foundationStyle} ${dropdownActionItemStyle}`);
+export class SpDropdownActionItem extends HTMLElement {
+    constructor() {
+        super();
+        const shadowRoot = this.attachShadow({ mode: "open" });
+        shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, styles];
+    }
+    connectedCallback() {
+        const baseElement = document.createElement("div");
+        const buttonElement = document.createElement("button");
+        const slotElement = document.createElement("slot");
+        this.role = "menuitem";
+        baseElement.classList.add("base");
+        buttonElement.classList.add("action");
+        buttonElement.appendChild(slotElement);
+        baseElement.appendChild(buttonElement);
+        this.shadowRoot?.appendChild(baseElement);
+    }
+}
+customElements.get("sp-dropdown-action-item") ||
+    customElements.define("sp-dropdown-action-item", SpDropdownActionItem);

dist/components/dropdownAction/sp-dropdown-action.d.ts

@@ -0,0 +1,25 @@
+import "./sp-dropdown-action-button";
+import "./sp-dropdown-action-item";
+type Position = "left" | "right";
+export declare class SpDropdownAction extends HTMLElement {
+    #private;
+    set label(value: string);
+    get open(): boolean;
+    set open(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get position(): Position;
+    set position(value: Position);
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-dropdown-action": SpDropdownAction;
+    }
+}
+export {};
+//# sourceMappingURL=sp-dropdown-action.d.ts.map

dist/components/dropdownAction/sp-dropdown-action.js

@@ -0,0 +1,173 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _SpDropdownAction_instances, _SpDropdownAction_baseElement, _SpDropdownAction_buttonElement, _SpDropdownAction_menuElement, _SpDropdownAction_menuSlotElement, _SpDropdownAction_menuItemElements, _SpDropdownAction_menuId, _SpDropdownAction_open, _SpDropdownAction_disabled, _SpDropdownAction_position, _SpDropdownAction_handleClickButton, _SpDropdownAction_handleSlotChange, _SpDropdownAction_handleClickMenuItem, _SpDropdownAction_handleClickOutside, _SpDropdownAction_updateMenuDisplay, _SpDropdownAction_setupAccessibilityAttributes, _SpDropdownAction_updateAriaExpandedAttribute, _SpDropdownAction_syncMenuMinWidthWithButtonWidth;
+// @ts-ignore
+import resetStyle from "@acab/reset.css?inline" assert { type: "css" };
+// @ts-ignore
+import foundationStyle from "../foundation.css?inline" assert { type: "css" };
+// @ts-ignore
+import dropdownActionStyle from "./dropdown-action.css?inline" assert { type: "css" };
+import "./sp-dropdown-action-button";
+import "./sp-dropdown-action-item";
+const positions = ["left", "right"];
+function isValidPosition(value) {
+    return positions.some((position) => position === value);
+}
+function createMenuId() {
+    return `sp-dropdown-action-menu-${Math.random().toString(32).substring(2)}`;
+}
+const styles = new CSSStyleSheet();
+styles.replaceSync(`${resetStyle} ${foundationStyle} ${dropdownActionStyle}`);
+export class SpDropdownAction extends HTMLElement {
+    set label(value) {
+        __classPrivateFieldGet(this, _SpDropdownAction_buttonElement, "f").text = value;
+        __classPrivateFieldGet(this, _SpDropdownAction_instances, "m", _SpDropdownAction_syncMenuMinWidthWithButtonWidth).call(this);
+    }
+    get open() {
+        return __classPrivateFieldGet(this, _SpDropdownAction_open, "f");
+    }
+    set open(value) {
+        __classPrivateFieldSet(this, _SpDropdownAction_open, value, "f");
+        if (value) {
+            __classPrivateFieldGet(this, _SpDropdownAction_buttonElement, "f").setAttribute("selected", "");
+        }
+        else {
+            __classPrivateFieldGet(this, _SpDropdownAction_buttonElement, "f").removeAttribute("selected");
+        }
+        __classPrivateFieldGet(this, _SpDropdownAction_instances, "m", _SpDropdownAction_updateMenuDisplay).call(this);
+    }
+    get disabled() {
+        return __classPrivateFieldGet(this, _SpDropdownAction_disabled, "f");
+    }
+    set disabled(value) {
+        __classPrivateFieldSet(this, _SpDropdownAction_disabled, value, "f");
+        __classPrivateFieldGet(this, _SpDropdownAction_buttonElement, "f").disabled = value;
+        __classPrivateFieldGet(this, _SpDropdownAction_instances, "m", _SpDropdownAction_updateMenuDisplay).call(this);
+    }
+    get position() {
+        return __classPrivateFieldGet(this, _SpDropdownAction_position, "f");
+    }
+    set position(value) {
+        if (value === "left") {
+            __classPrivateFieldGet(this, _SpDropdownAction_menuElement, "f").classList.add("position__left");
+            __classPrivateFieldGet(this, _SpDropdownAction_menuElement, "f").classList.remove("position__right");
+        }
+        else {
+            __classPrivateFieldGet(this, _SpDropdownAction_menuElement, "f").classList.add("position__right");
+            __classPrivateFieldGet(this, _SpDropdownAction_menuElement, "f").classList.remove("position__left");
+        }
+        __classPrivateFieldSet(this, _SpDropdownAction_position, value, "f");
+    }
+    static get observedAttributes() {
+        return ["label", "open", "disabled", "position"];
+    }
+    constructor() {
+        super();
+        _SpDropdownAction_instances.add(this);
+        _SpDropdownAction_baseElement.set(this, document.createElement("div"));
+        _SpDropdownAction_buttonElement.set(this, document.createElement("sp-dropdown-action-button"));
+        _SpDropdownAction_menuElement.set(this, document.createElement("div"));
+        _SpDropdownAction_menuSlotElement.set(this, document.createElement("slot"));
+        _SpDropdownAction_menuItemElements.set(this, []);
+        _SpDropdownAction_menuId.set(this, createMenuId());
+        _SpDropdownAction_open.set(this, false);
+        _SpDropdownAction_disabled.set(this, false);
+        _SpDropdownAction_position.set(this, "left");
+        const shadowRoot = this.attachShadow({ mode: "open" });
+        shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, styles];
+        this.open = false;
+        this.disabled = false;
+        this.position = "left";
+    }
+    connectedCallback() {
+        __classPrivateFieldGet(this, _SpDropdownAction_buttonElement, "f").setAttribute("part", "button");
+        __classPrivateFieldGet(this, _SpDropdownAction_buttonElement, "f").addEventListener("click", __classPrivateFieldGet(this, _SpDropdownAction_instances, "m", _SpDropdownAction_handleClickButton).bind(this));
+        __classPrivateFieldGet(this, _SpDropdownAction_baseElement, "f").appendChild(__classPrivateFieldGet(this, _SpDropdownAction_buttonElement, "f"));
+        __classPrivateFieldGet(this, _SpDropdownAction_menuElement, "f").classList.add("menu");
+        __classPrivateFieldGet(this, _SpDropdownAction_menuElement, "f").role = "menu";
+        __classPrivateFieldGet(this, _SpDropdownAction_menuElement, "f").appendChild(__classPrivateFieldGet(this, _SpDropdownAction_menuSlotElement, "f"));
+        __classPrivateFieldGet(this, _SpDropdownAction_menuSlotElement, "f").addEventListener("slotchange", __classPrivateFieldGet(this, _SpDropdownAction_instances, "m", _SpDropdownAction_handleSlotChange).bind(this));
+        window.addEventListener("click", __classPrivateFieldGet(this, _SpDropdownAction_instances, "m", _SpDropdownAction_handleClickOutside).bind(this));
+        __classPrivateFieldGet(this, _SpDropdownAction_baseElement, "f").appendChild(__classPrivateFieldGet(this, _SpDropdownAction_menuElement, "f"));
+        __classPrivateFieldGet(this, _SpDropdownAction_baseElement, "f").classList.add("base");
+        this.shadowRoot?.appendChild(__classPrivateFieldGet(this, _SpDropdownAction_baseElement, "f"));
+        __classPrivateFieldGet(this, _SpDropdownAction_instances, "m", _SpDropdownAction_setupAccessibilityAttributes).call(this);
+        __classPrivateFieldGet(this, _SpDropdownAction_instances, "m", _SpDropdownAction_syncMenuMinWidthWithButtonWidth).call(this);
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _SpDropdownAction_menuItemElements, "f").forEach((element) => {
+            element.removeEventListener("click", __classPrivateFieldGet(this, _SpDropdownAction_instances, "m", _SpDropdownAction_handleClickMenuItem).bind(this));
+        });
+        __classPrivateFieldGet(this, _SpDropdownAction_menuSlotElement, "f").removeEventListener("slotchange", __classPrivateFieldGet(this, _SpDropdownAction_instances, "m", _SpDropdownAction_handleSlotChange).bind(this));
+        window.removeEventListener("click", __classPrivateFieldGet(this, _SpDropdownAction_instances, "m", _SpDropdownAction_handleClickOutside).bind(this));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        switch (name) {
+            case "label":
+                this.label = newValue;
+                break;
+            case "open":
+                this.open = newValue === "true" || newValue === "";
+                break;
+            case "disabled":
+                this.disabled = newValue === "true" || newValue === "";
+                break;
+            case "position":
+                if (isValidPosition(newValue)) {
+                    this.position = newValue;
+                }
+                else {
+                    console.warn(`${newValue}は無効なposition属性です。`);
+                    this.position = "left";
+                }
+        }
+    }
+}
+_SpDropdownAction_baseElement = new WeakMap(), _SpDropdownAction_buttonElement = new WeakMap(), _SpDropdownAction_menuElement = new WeakMap(), _SpDropdownAction_menuSlotElement = new WeakMap(), _SpDropdownAction_menuItemElements = new WeakMap(), _SpDropdownAction_menuId = new WeakMap(), _SpDropdownAction_open = new WeakMap(), _SpDropdownAction_disabled = new WeakMap(), _SpDropdownAction_position = new WeakMap(), _SpDropdownAction_instances = new WeakSet(), _SpDropdownAction_handleClickButton = function _SpDropdownAction_handleClickButton(event) {
+    event.stopPropagation();
+    this.open = !this.open;
+    __classPrivateFieldGet(this, _SpDropdownAction_instances, "m", _SpDropdownAction_updateAriaExpandedAttribute).call(this);
+}, _SpDropdownAction_handleSlotChange = function _SpDropdownAction_handleSlotChange() {
+    __classPrivateFieldSet(this, _SpDropdownAction_menuItemElements, __classPrivateFieldGet(this, _SpDropdownAction_menuSlotElement, "f")
+        .assignedElements()
+        .filter((element) => element instanceof HTMLElement), "f");
+    __classPrivateFieldGet(this, _SpDropdownAction_menuItemElements, "f").forEach((element) => {
+        element.addEventListener("click", __classPrivateFieldGet(this, _SpDropdownAction_instances, "m", _SpDropdownAction_handleClickMenuItem).bind(this));
+    });
+}, _SpDropdownAction_handleClickMenuItem = function _SpDropdownAction_handleClickMenuItem(event) {
+    event.stopPropagation();
+    this.open = false;
+    __classPrivateFieldGet(this, _SpDropdownAction_instances, "m", _SpDropdownAction_updateAriaExpandedAttribute).call(this);
+}, _SpDropdownAction_handleClickOutside = function _SpDropdownAction_handleClickOutside(event) {
+    event.stopPropagation();
+    if (!this.contains(event.target)) {
+        this.open = false;
+        __classPrivateFieldGet(this, _SpDropdownAction_instances, "m", _SpDropdownAction_updateAriaExpandedAttribute).call(this);
+    }
+}, _SpDropdownAction_updateMenuDisplay = function _SpDropdownAction_updateMenuDisplay() {
+    __classPrivateFieldGet(this, _SpDropdownAction_menuElement, "f").style.display =
+        this.open && !this.disabled ? "block" : "none";
+}, _SpDropdownAction_setupAccessibilityAttributes = function _SpDropdownAction_setupAccessibilityAttributes() {
+    __classPrivateFieldGet(this, _SpDropdownAction_buttonElement, "f").setAriaHasPopup("true");
+    __classPrivateFieldGet(this, _SpDropdownAction_buttonElement, "f").setAriaControls(__classPrivateFieldGet(this, _SpDropdownAction_menuId, "f"));
+    __classPrivateFieldGet(this, _SpDropdownAction_menuElement, "f").setAttribute("id", __classPrivateFieldGet(this, _SpDropdownAction_menuId, "f"));
+    __classPrivateFieldGet(this, _SpDropdownAction_instances, "m", _SpDropdownAction_updateAriaExpandedAttribute).call(this);
+}, _SpDropdownAction_updateAriaExpandedAttribute = function _SpDropdownAction_updateAriaExpandedAttribute() {
+    __classPrivateFieldGet(this, _SpDropdownAction_buttonElement, "f").setAriaExpanded(this.open ? "true" : "false");
+}, _SpDropdownAction_syncMenuMinWidthWithButtonWidth = function _SpDropdownAction_syncMenuMinWidthWithButtonWidth() {
+    const buttonWidth = __classPrivateFieldGet(this, _SpDropdownAction_buttonElement, "f").offsetWidth;
+    __classPrivateFieldGet(this, _SpDropdownAction_menuElement, "f").style.minWidth = `${buttonWidth}px`;
+};
+customElements.get("sp-dropdown-action") ||
+    customElements.define("sp-dropdown-action", SpDropdownAction);