@odx/foundation 1.0.0-alpha.38 → 1.0.0-alpha.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/components/button/button.d.ts +2 -0
  2. package/dist/components.js +7 -1
  3. package/package.json +1 -1
package/dist/components/button/button.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { TemplateResult } from 'lit';
1
2
  import { BaseButton } from './base-button.js';
2
3
  import { ButtonSize, ButtonVariant } from './button.models.js';
3
4
  declare global {
@@ -35,6 +36,7 @@ export declare class OdxButton extends OdxButton_base {
35
36
  */
36
37
  variant?: ButtonVariant;
37
38
  constructor();
39
+ protected render(): TemplateResult;
38
40
  }
39
41
  export {};
40
42
  //# sourceMappingURL=button.d.ts.map
package/dist/components.js CHANGED
@@ -953,7 +953,7 @@ __decorateClass$17([
953
953
  property({ type: Number, attribute: "line-clamp" })
954
954
  ], BaseButton.prototype, "lineClamp", 2);
955
955
 
956
- const styles$Y = "@layer base{.base{font-weight:var(--odx-typography-font-weight-medium)}}@layer variant{:host([block]){display:flex}:host-context(odx-input),:host-context(odx-button-group[size=\"sm\"]),:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);--_margin-block: 0}:host-context(odx-button-group[size=\"lg\"]),:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host-context(odx-button-group[variant=\"primary\"]),:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host-context(odx-button-group[variant=\"highlight\"]),:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host,:host-context(odx-button-group[variant=\"secondary\"]),:host([variant=\"secondary\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host-context(odx-input),:host-context(odx-button-group[variant=\"ghost\"]),:host([variant=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground-base);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}:host-context(odx-button-group[variant=\"danger\"]),:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}:host-context(odx-input){--_icon-size: var(--odx-typography-font-size-5)}}";
956
+ const styles$Y = "@layer base{.base{font-weight:var(--odx-typography-font-weight-medium)}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-size-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:50% -50%}::slotted([slot=\"badge\"][align=\"end\"]){inset-block-start:unset;inset-block-end:var(--_badge-margin);translate:50% 50%}::slotted([slot=\"badge\"][align=\"center\"]){--_badge-margin: 0;inset-block-start:unset;inset-block-end:0;inset-inline:auto;translate:0 50%}}@layer variant{:host([block]){display:flex}:host-context(odx-input),:host-context(odx-button-group[size=\"sm\"]),:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);--_margin-block: 0}:host-context(odx-button-group[size=\"lg\"]),:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host-context(odx-button-group[variant=\"primary\"]),:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host-context(odx-button-group[variant=\"highlight\"]),:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host,:host-context(odx-button-group[variant=\"secondary\"]),:host([variant=\"secondary\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host-context(odx-input),:host-context(odx-button-group[variant=\"ghost\"]),:host([variant=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground-base);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}:host-context(odx-button-group[variant=\"danger\"]),:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}:host-context(odx-input){--_icon-size: var(--odx-typography-font-size-5)}}";
957
957
 
958
958
  var __defProp$16 = Object.defineProperty;
959
959
  var __getOwnPropDesc$16 = Object.getOwnPropertyDescriptor;
@@ -984,6 +984,12 @@ let OdxButton = class extends WithLoadingState(BaseButton) {
984
984
  this.addEventListener("click", __privateMethod$c(this, _OdxButton_instances, handleClick_fn));
985
985
  }
986
986
  }
987
+ render() {
988
+ return html`
989
+ ${super.render()}
990
+ <slot name="badge"></slot>
991
+ `;
992
+ }
987
993
  };
988
994
  _internals = new WeakMap();
989
995
  _OdxButton_instances = new WeakSet();
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@odx/foundation",
3
3
  "description": "A library of Web Component building blocks for ODX",
4
- "version": "1.0.0-alpha.38",
4
+ "version": "1.0.0-alpha.39",
5
5
  "author": "Drägerwerk AG & Co.KGaA",
6
6
  "license": "SEE LICENSE IN LICENSE",
7
7
  "homepage": "https://odx.draeger.com",