@sebgroup/green-core 1.15.0 → 1.16.0

package/chunks/chunk.6UA66KQU.js

@@ -0,0 +1,153 @@
+import {
+  TransitionalStyles
+} from "./chunk.QONSFT2N.js";
+import {
+  GdsElement
+} from "./chunk.2LQSDOD4.js";
+import {
+  constrainSlots
+} from "./chunk.6NM7ENKA.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateMethod
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/context-menu/context-menu.ts
+import { nothing } from "lit";
+import { msg } from "@lit/localize";
+import { classMap } from "lit-html/directives/class-map.js";
+import { property, queryAsync, state } from "lit/decorators.js";
+
+// libs/core/src/components/context-menu/context-menu.styles.ts
+import { css } from "lit";
+var style = css`
+  @layer base, reset, transitional-styles;
+  @layer base {
+    button {
+      display: flex;
+      border-width: 0;
+      background-color: #ededed;
+      border-radius: calc(1px * infinity);
+      padding: 0.4rem 0.8rem;
+      font-family: inherit;
+      cursor: pointer;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    button:hover {
+      background-color: #dcdcdc;
+    }
+  }
+`;
+var context_menu_styles_default = style;
+
+// libs/core/src/components/context-menu/context-menu.ts
+var _handleItemClick, handleItemClick_fn;
+var GdsContextMenu = class extends GdsElement {
+  constructor() {
+    super();
+    __privateAdd(this, _handleItemClick);
+    this.open = false;
+    this.buttonLabel = msg("Open context menu");
+    this.showLabel = false;
+    this.label = "";
+    this.placement = "bottom-start";
+    constrainSlots(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-context-menu");
+    this.addEventListener("keydown", (e) => {
+      if (this.open && e.key == "Tab") {
+        e.preventDefault();
+        this.open = false;
+        this.elTriggerBtn.then((el) => el.focus());
+      }
+    });
+  }
+  render() {
+    var _a, _b, _c;
+    return html`${this._tStyles}
+      <button
+        id="trigger"
+        class="icon border-0 small ${classMap({ highlighted: this.open })}"
+        aria-label=${(_a = this.buttonLabel) != null ? _a : this.label}
+        aria-haspopup="menu"
+        aria-controls="menu"
+        aria-expanded=${this.open}
+        @click=${() => this.open = !this.open}
+      >
+        <slot name="trigger">
+          ${this.showLabel ? (_b = this.buttonLabel) != null ? _b : this.label : nothing}
+          <svg width="24" height="24" viewBox="0 0 24 24">
+            <path
+              d="M14 12C14 13.1042 13.1042 14 12 14C10.8958 14 10 13.1042 10 12C10 10.8958 10.8958 10 12 10C13.1042 10 14 10.8958 14 12ZM19 10C17.8958 10 17 10.8958 17 12C17 13.1042 17.8958 14 19 14C20.1042 14 21 13.1042 21 12C21 10.8958 20.1042 10 19 10ZM5 10C3.89583 10 3 10.8958 3 12C3 13.1042 3.89583 14 5 14C6.10417 14 7 13.1042 7 12C7 10.8958 6.10417 10 5 10Z"
+              fill="#353531"
+            />
+          </svg>
+        </slot>
+      </button>
+      <gds-popover
+        id="menu"
+        .open=${this.open}
+        .triggerRef=${this.elTriggerBtn}
+        .label=${this.label}
+        .placement=${this.placement}
+        @gds-ui-state=${(e) => this.open = e.detail.open}
+      >
+        <gds-menu
+          aria-label=${(_c = this.label) != null ? _c : this.buttonLabel}
+          @gds-menu-item-click=${__privateMethod(this, _handleItemClick, handleItemClick_fn)}
+        >
+          <slot allow="gds-menu-item gds-menu-heading"></slot>
+        </gds-menu>
+      </gds-popover>`;
+  }
+};
+_handleItemClick = new WeakSet();
+handleItemClick_fn = function() {
+  this.open = false;
+};
+GdsContextMenu.styles = [context_menu_styles_default];
+GdsContextMenu.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsContextMenu.prototype, "open", 2);
+__decorateClass([
+  property({
+    attribute: "button-label"
+  })
+], GdsContextMenu.prototype, "buttonLabel", 2);
+__decorateClass([
+  property({
+    attribute: "show-label"
+  })
+], GdsContextMenu.prototype, "showLabel", 2);
+__decorateClass([
+  property()
+], GdsContextMenu.prototype, "label", 2);
+__decorateClass([
+  property()
+], GdsContextMenu.prototype, "placement", 2);
+__decorateClass([
+  state()
+], GdsContextMenu.prototype, "_tStyles", 2);
+__decorateClass([
+  queryAsync("#trigger")
+], GdsContextMenu.prototype, "elTriggerBtn", 2);
+GdsContextMenu = __decorateClass([
+  gdsCustomElement("gds-context-menu")
+], GdsContextMenu);
+
+export {
+  GdsContextMenu
+};