diff --git a/dist/components/dropdownAction/dropdown-action-button.css b/dist/components/dropdownAction/dropdown-action-button.css new file mode 100644 index 0000000..dee06c3 --- /dev/null +++ b/dist/components/dropdownAction/dropdown-action-button.css @@ -0,0 +1,5 @@ +.base { + min-width: 80px; + width: 100%; + flex-direction: row-reverse; +} diff --git a/dist/components/dropdownAction/dropdown-action-item.css b/dist/components/dropdownAction/dropdown-action-item.css new file mode 100644 index 0000000..8dfad90 --- /dev/null +++ b/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; +} diff --git a/dist/components/dropdownAction/dropdown-action.css b/dist/components/dropdownAction/dropdown-action.css new file mode 100644 index 0000000..06f4277 --- /dev/null +++ b/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; +} diff --git a/dist/components/dropdownAction/sp-dropdown-action-button.d.ts b/dist/components/dropdownAction/sp-dropdown-action-button.d.ts new file mode 100644 index 0000000..7efe69f --- /dev/null +++ b/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 \ No newline at end of file diff --git a/dist/components/dropdownAction/sp-dropdown-action-button.d.ts.map b/dist/components/dropdownAction/sp-dropdown-action-button.d.ts.map new file mode 100644 index 0000000..e0f8342 --- /dev/null +++ b/dist/components/dropdownAction/sp-dropdown-action-button.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-dropdown-action-button.d.ts","sourceRoot":"","sources":["../../../src/components/dropdownAction/sp-dropdown-action-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAO/C,OAAO,iBAAiB,CAAC;AAOzB,qBAAa,sBAAuB,SAAQ,QAAQ;;IAYlD,iBAAiB,IAAI,IAAI;IAMzB,eAAe,CAAC,KAAK,EAAE,MAAM;IAI7B,eAAe,CAAC,KAAK,EAAE,MAAM;IAI7B,eAAe,CAAC,KAAK,EAAE,MAAM;CAG9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,2BAA2B,EAAE,sBAAsB,CAAC;KACrD;CACF"} \ No newline at end of file diff --git a/dist/components/dropdownAction/sp-dropdown-action-button.js b/dist/components/dropdownAction/sp-dropdown-action-button.js new file mode 100644 index 0000000..e33c57a --- /dev/null +++ b/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); diff --git a/dist/components/dropdownAction/sp-dropdown-action-item.d.ts b/dist/components/dropdownAction/sp-dropdown-action-item.d.ts new file mode 100644 index 0000000..3577a38 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/dist/components/dropdownAction/sp-dropdown-action-item.d.ts.map b/dist/components/dropdownAction/sp-dropdown-action-item.d.ts.map new file mode 100644 index 0000000..434fed9 --- /dev/null +++ b/dist/components/dropdownAction/sp-dropdown-action-item.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-dropdown-action-item.d.ts","sourceRoot":"","sources":["../../../src/components/dropdownAction/sp-dropdown-action-item.ts"],"names":[],"mappings":"AAQA,qBAAa,oBAAqB,SAAQ,WAAW;;IAQnD,iBAAiB;CAalB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF"} \ No newline at end of file diff --git a/dist/components/dropdownAction/sp-dropdown-action-item.js b/dist/components/dropdownAction/sp-dropdown-action-item.js new file mode 100644 index 0000000..bd64de5 --- /dev/null +++ b/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); diff --git a/dist/components/dropdownAction/sp-dropdown-action.d.ts b/dist/components/dropdownAction/sp-dropdown-action.d.ts new file mode 100644 index 0000000..f260b04 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/dist/components/dropdownAction/sp-dropdown-action.d.ts.map b/dist/components/dropdownAction/sp-dropdown-action.d.ts.map new file mode 100644 index 0000000..409f6e5 --- /dev/null +++ b/dist/components/dropdownAction/sp-dropdown-action.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"sp-dropdown-action.d.ts","sourceRoot":"","sources":["../../../src/components/dropdownAction/sp-dropdown-action.ts"],"names":[],"mappings":"AAMA,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AAEnC,KAAK,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAejC,qBAAa,gBAAiB,SAAQ,WAAW;;IAa/C,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;IAED,IAAI,IAAI,IAGQ,OAAO,CADtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAUtB;IAED,IAAI,QAAQ,IAGQ,OAAO,CAD1B;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;IAED,IAAI,QAAQ,IAGQ,QAAQ,CAD3B;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAU3B;IAED,MAAM,KAAK,kBAAkB,aAE5B;;IAaD,iBAAiB;IA6BjB,oBAAoB;IAgBpB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;CA2E1E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"} \ No newline at end of file diff --git a/dist/components/dropdownAction/sp-dropdown-action.js b/dist/components/dropdownAction/sp-dropdown-action.js new file mode 100644 index 0000000..3b11112 --- /dev/null +++ b/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);