@odx/foundation 1.0.0-alpha.39 → 1.0.0-alpha.40
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.
|
@@ -22,6 +22,7 @@ declare const OdxButton_base: import('../../lib/main.js').Constructor<import('..
|
|
|
22
22
|
export declare class OdxButton extends OdxButton_base {
|
|
23
23
|
#private;
|
|
24
24
|
static readonly formAssociated = true;
|
|
25
|
+
alignBadge?: 'center' | 'end';
|
|
25
26
|
block: boolean;
|
|
26
27
|
/**
|
|
27
28
|
* The type of the button.
|
package/dist/components.js
CHANGED
|
@@ -648,7 +648,7 @@ const AvatarVariant = {
|
|
|
648
648
|
RECTANGLE: "rectangle"
|
|
649
649
|
};
|
|
650
650
|
|
|
651
|
-
const styles$11 = "@layer base{@keyframes pulse{0%{box-shadow:0 0 0 0 var(--_color-background)}70%{box-shadow:0 0 0 var(--odx-size-37) transparent}to{box-shadow:0 0 0 0 transparent}}:host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_block-size: var(--odx-size-100);display:inline-block;pointer-events:none;vertical-align:middle}.content{--_font-size: var(--odx-typography-font-size-1);block-size:var(--_block-size);line-height:var(--_block-size);min-inline-size:var(--_block-size);border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);color:var(--_color-foreground);cursor:default;user-select:none;font-weight:var(--odx-typography-font-weight-medium);padding-inline:var(--odx-size-
|
|
651
|
+
const styles$11 = "@layer base{@keyframes pulse{0%{box-shadow:0 0 0 0 var(--_color-background)}70%{box-shadow:0 0 0 var(--odx-size-37) transparent}to{box-shadow:0 0 0 0 transparent}}:host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_block-size: var(--odx-size-100);display:inline-block;pointer-events:none;vertical-align:middle}.content{--_font-size: var(--odx-typography-font-size-1);block-size:var(--_block-size);line-height:var(--_block-size);min-inline-size:var(--_block-size);border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);color:var(--_color-foreground);cursor:default;user-select:none;font-weight:var(--odx-typography-font-weight-medium);padding-inline:var(--odx-size-25);text-align:center}}@layer variant{:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-highlight-rest);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-warning-rest);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-foreground: var(--odx-color-foreground-light)}:host([compact]){--_block-size: var(--odx-size-75);.content{inline-size:var(--_block-size);padding:0;margin:var(--odx-size-12)}}:host([pulse]){.content{animation:pulse 1.25s infinite}}}";
|
|
652
652
|
|
|
653
653
|
var __defProp$1b = Object.defineProperty;
|
|
654
654
|
var __getOwnPropDesc$1b = Object.getOwnPropertyDescriptor;
|
|
@@ -879,7 +879,7 @@ OdxButtonGroup = __decorateClass$18([
|
|
|
879
879
|
customElement("odx-button-group", [styles$_])
|
|
880
880
|
], OdxButtonGroup);
|
|
881
881
|
|
|
882
|
-
const styles$Z = "@layer base{:host{--_color-background: var(--odx-color-transparent);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed);--_color-foreground: var(--odx-color-foreground-base);--_color-foreground-hover: var(--odx-color-foreground-base);--_color-foreground-pressed: var(--odx-color-foreground-base);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: 0;--_margin-icon: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-controls);margin-block:var(--_margin-block);max-inline-size:100%;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,.base{display:inline-flex;place-items:center;place-content:center}.base{overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform,block-size;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_font-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-normal);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}.base::-moz-focus-inner{padding:0;border:0}.spinner{--_size: var(--_icon-size);color:var(--_color-foreground);margin-inline:var(--_margin-icon);&.overlay{position:absolute;margin:auto;inset:0}}.content{margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline)}.overlay~.base{color:var(--odx-color-transparent)}odx-icon,::slotted(odx-icon){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}}@layer state{:host(:not([aria-busy=\"true\"])) .base:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([aria-busy=\"true\"])) .base:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([aria-busy=\"true\"]){cursor:default}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-background-hover: var(--odx-color-disabled-fill);--_color-background-pressed: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}}";
|
|
882
|
+
const styles$Z = "@layer base{:host{--_color-background: var(--odx-color-transparent);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed);--_color-foreground: var(--odx-color-foreground-base);--_color-foreground-hover: var(--odx-color-foreground-base);--_color-foreground-pressed: var(--odx-color-foreground-base);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: 0;--_margin-icon: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-controls);margin-block:var(--_margin-block);max-inline-size:100%;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,.base{display:inline-flex;place-items:center;place-content:center}.base{overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform,block-size;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_font-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-normal);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}.base::-moz-focus-inner{padding:0;border:0}.spinner{--_size: var(--_icon-size);color:var(--_color-foreground);margin-inline:var(--_margin-icon);&.overlay{position:absolute;margin:auto;inset:0}}.content{margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline)}.overlay~.base{color:var(--odx-color-transparent)}odx-icon,::slotted(odx-icon){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}::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:var(--odx-size-37) -50%}}@layer state{:host(:not([aria-busy=\"true\"])) .base:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([aria-busy=\"true\"])) .base:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([aria-busy=\"true\"]){cursor:default}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-background-hover: var(--odx-color-disabled-fill);--_color-background-pressed: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host(:is([align-badge=\"end\"],[align-badge=\"center\"])) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0}:host([align-badge=\"end\"]) ::slotted([slot=\"badge\"]){translate:var(--odx-size-37) 50%}:host([align-badge=\"center\"]) ::slotted([slot=\"badge\"]){inset-inline:auto;translate:0 calc(50% + var(--_badge-margin))}}";
|
|
883
883
|
|
|
884
884
|
var __defProp$17 = Object.defineProperty;
|
|
885
885
|
var __getOwnPropDesc$17 = Object.getOwnPropertyDescriptor;
|
|
@@ -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)}
|
|
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)}}";
|
|
957
957
|
|
|
958
958
|
var __defProp$16 = Object.defineProperty;
|
|
959
959
|
var __getOwnPropDesc$16 = Object.getOwnPropertyDescriptor;
|
|
@@ -1004,6 +1004,9 @@ handleClick_fn = function(_event) {
|
|
|
1004
1004
|
}
|
|
1005
1005
|
};
|
|
1006
1006
|
OdxButton.formAssociated = true;
|
|
1007
|
+
__decorateClass$16([
|
|
1008
|
+
property({ reflect: true, attribute: "align-badge" })
|
|
1009
|
+
], OdxButton.prototype, "alignBadge", 2);
|
|
1007
1010
|
__decorateClass$16([
|
|
1008
1011
|
property({ type: Boolean, reflect: true })
|
|
1009
1012
|
], OdxButton.prototype, "block", 2);
|
|
@@ -1864,7 +1867,7 @@ const TitleSize = {
|
|
|
1864
1867
|
XXL: "xxl"
|
|
1865
1868
|
};
|
|
1866
1869
|
|
|
1867
|
-
const styles$N = "@layer base{:host{display:flex;block-size:var(--odx-size-300);background-color:var(--odx-color-
|
|
1870
|
+
const styles$N = "@layer base{:host{display:block;position:relative}.base{display:flex;block-size:var(--odx-size-300);background-color:var(--odx-color-background-main);column-gap:var(--odx-size-150);padding-inline:var(--odx-size-150);place-items:center;z-index:1;position:relative}.background{position:absolute;inset:0;z-index:0;background-color:var(--odx-color-background-main);clip-path:inset(0 -100vmax);box-shadow:0 0 0 100vmax var(--odx-color-background-main)}odx-logo{flex:0 0 auto}::slotted(odx-title){width:max-content}::slotted(odx-main-menu-button){margin-inline-end:calc(-1 * var(--odx-size-75))}::slotted(odx-header-actions){margin-inline-start:auto}@media screen and (max-width: 600px){odx-logo{display:none}}}";
|
|
1868
1871
|
|
|
1869
1872
|
var __defProp$S = Object.defineProperty;
|
|
1870
1873
|
var __getOwnPropDesc$S = Object.getOwnPropertyDescriptor;
|
|
@@ -1901,10 +1904,13 @@ let OdxHeader = class extends CustomElement {
|
|
|
1901
1904
|
}
|
|
1902
1905
|
render() {
|
|
1903
1906
|
return html`
|
|
1904
|
-
<
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1907
|
+
<div class="base">
|
|
1908
|
+
<slot name="prefix"></slot>
|
|
1909
|
+
<odx-logo size="sm"></odx-logo>
|
|
1910
|
+
<slot @slotchange=${__privateGet$g(this, _handleSlotChange$4)}></slot>
|
|
1911
|
+
<slot name="actions"></slot>
|
|
1912
|
+
</div>
|
|
1913
|
+
<div class="background"></div>
|
|
1908
1914
|
`;
|
|
1909
1915
|
}
|
|
1910
1916
|
};
|
|
@@ -2011,6 +2017,7 @@ let OdxIconButton = class extends OdxButton {
|
|
|
2011
2017
|
<odx-visually-hidden>
|
|
2012
2018
|
<slot></slot>
|
|
2013
2019
|
</odx-visually-hidden>
|
|
2020
|
+
<slot name="badge"></slot>
|
|
2014
2021
|
`;
|
|
2015
2022
|
}
|
|
2016
2023
|
};
|
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.
|
|
4
|
+
"version": "1.0.0-alpha.40",
|
|
5
5
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
7
7
|
"homepage": "https://odx.draeger.com",
|