@proximus/lavender-action-button 2.0.0-alpha.97

package/dist/ActionButton.d.ts

@@ -0,0 +1,20 @@
+import '@proximus/lavender-layout';
+import '@proximus/lavender-icon';
+import '@proximus/lavender-span';
+import { PxElement } from '@proximus/lavender-common';
+export declare class ActionButton extends PxElement<HTMLButtonElement> {
+    static nativeName: string;
+    template: () => string;
+    constructor();
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
+    get $icon(): HTMLElement;
+    get $dropdown(): HTMLElement;
+    get iconName(): string;
+    set iconName(value: string);
+    get iconFrom(): string;
+    set iconFrom(value: string);
+    get promoted(): boolean;
+    set promoted(value: boolean);
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './ActionButton';

package/dist/index.es.js

@@ -0,0 +1,76 @@
+import "@proximus/lavender-layout";
+import "@proximus/lavender-icon";
+import "@proximus/lavender-span";
+import { PxElement as a, transferAccessibilityAttributes as p } from "@proximus/lavender-common";
+const d = "button{border-radius:var(--px-radius-pill);background-color:var(--px-color-background-container-secondary-default);border:var(--px-size-border-m) solid transparent;width:var(--px-size-l);height:var(--px-size-l)}button:hover{background-color:transparent;border-color:var(--px-color-border-state-hover-default)}@media only screen and (min-width: 48rem){button{border-radius:var(--px-radius-main);width:inherit;height:inherit}}", l = ":host{display:block}:host *{box-sizing:border-box}:host(:not([promoted])){display:none}a,button{display:block;padding:var(--px-padding-xs-mobile);cursor:pointer;border-radius:var(--px-radius-main);text-decoration:none;color:var(--px-color-text-brand-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}a px-span,button px-span{font-size:var(--px-text-size-label-s-mobile)}a:hover,button:hover{background-color:var(--px-color-background-container-secondary-default)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media only screen and (min-width: 48rem){a,button{padding:var(--px-padding-xs-tablet) var(--px-padding-2xs-tablet);min-width:65px}a px-span,button px-span{font-size:var(--px-text-size-label-s-tablet)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:host(:not([promoted])){display:block}}@media only screen and (min-width: 64.0625rem){a,button{padding:var(--px-padding-xs-laptop) var(--px-padding-2xs-laptop)}a px-span,button px-span{font-size:var(--px-text-size-label-s-laptop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625rem){a,button{padding:var(--px-padding-xs-desktop) var(--px-padding-2xs-desktop)}a px-span,button px-span{font-size:var(--px-text-size-label-s-desktop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}", s = new CSSStyleSheet(), r = new CSSStyleSheet();
+s.replaceSync(d);
+r.replaceSync(l);
+const i = class i extends a {
+  constructor() {
+    super(r, s), this.template = () => `
+      <button class="action-button">
+        <px-vstack gap="none" align-items="center" justify-content="center">
+          <px-icon
+            name="${this.getAttribute("icon-name")}"
+            from="${this.getAttribute("icon-from")}"
+            size="s"
+            hidden--mobile
+          >
+          </px-icon>
+          <px-span color="brand"><slot></slot></px-span>
+        </px-vstack>
+      </button>
+    `, this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "icon-name", "icon-from", "promoted"];
+  }
+  connectedCallback() {
+    var t;
+    ((t = this.parentElement) == null ? void 0 : t.localName) === "px-header" && this.setAttribute("slot", "header-actions"), p(this, this.$el, !1);
+  }
+  attributeChangedCallback(t, n, e) {
+    if (n !== e)
+      switch (t) {
+        case "icon-name":
+          this.$icon.setAttribute("name", e);
+          break;
+        case "icon-from":
+          this.$icon.setAttribute("from", e);
+          break;
+        default:
+          super.attributeChangedCallback(t, n, e);
+          break;
+      }
+  }
+  get $icon() {
+    return this.shadowRoot.querySelector("px-icon");
+  }
+  get $dropdown() {
+    return this.shadowRoot.querySelector("px-dropdown");
+  }
+  get iconName() {
+    return this.getAttribute("icon-name");
+  }
+  set iconName(t) {
+    this.setAttribute("icon-name", t);
+  }
+  get iconFrom() {
+    return this.getAttribute("icon-from");
+  }
+  set iconFrom(t) {
+    this.setAttribute("icon-from", t);
+  }
+  get promoted() {
+    return this.hasAttribute("promoted");
+  }
+  set promoted(t) {
+    t ? this.setAttribute("promoted", "") : this.removeAttribute("promoted");
+  }
+};
+i.nativeName = "button";
+let o = i;
+customElements.get("px-action-button") || customElements.define("px-action-button", o);
+export {
+  o as ActionButton
+};

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@proximus/lavender-action-button",
+  "version": "2.0.0-alpha.97",
+  "description": "",
+  "main": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
+    "clean": "rm -rf dist",
+    "build": "npm run clean && NODE_ENV=development vite build &&  tsc && npm run transform-package-json && npm run wc-manifest",
+    "test": "vitest run --coverage",
+    "wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js  --outdir dist"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "customElements": "dist/custom-elements.json",
+  "web-types": "./dist/web-types.json"
+}