@odx/foundation 0.1.0-alpha.26 → 0.1.0-alpha.27
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.
- package/dist/components/accordion/accordion-header.component.css.js +1 -1
- package/dist/components/avatar/avatar.component.css.js +1 -1
- package/dist/components/button/button.component.css.js +1 -1
- package/dist/components/button-group/button-group.component.d.ts +8 -2
- package/dist/components/button-group/button-group.component.d.ts.map +1 -1
- package/dist/components/button-group/button-group.component.js +13 -2
- package/dist/src/lib/mixins/can-be-disabled.d.ts +2 -0
- package/dist/src/lib/mixins/can-be-disabled.d.ts.map +1 -1
- package/dist/src/lib/mixins/can-be-disabled.js +15 -4
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
const styles = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: var(--odx-color-foreground);display:flex;user-select:none;place-items:center;cursor:pointer;gap:var(--odx-size-50);min-block-size:var(--odx-size-225);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);margin-block:var(--odx-size-37);padding-block:var(--odx-size-25);padding-inline:var(--odx-size-50);color:var(--_color-foreground);transition:var(--odx-transition-default);transition-property:background-color,color,outline-color;outline:var(--odx-focus-ring-outline)}.indicator{--size: var(--odx-size-150);display:block;margin-inline-start:auto;aspect-ratio:1;transition:var(--odx-transition-slow);transition-property:transform}:host(:not([disabled]):hover){--_color-background: var(--odx-color-transparent-hover)}:host(:not([disabled]):active){--_color-background: var(--odx-color-transparent-pressed)}:host([aria-disabled=\"true\"]){--_color-foreground: var(--odx-color-disabled-foreground);cursor:default}:host([aria-expanded=\"true\"]){.indicator{transform:rotateX(180deg)}}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}";
|
|
1
|
+
const styles = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: var(--odx-color-foreground);display:flex;user-select:none;place-items:center;cursor:pointer;gap:var(--odx-size-50);min-block-size:var(--odx-size-225);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);margin-block:var(--odx-size-37);padding-block:var(--odx-size-25);padding-inline:var(--odx-size-50);color:var(--_color-foreground);transition:var(--odx-transition-default);transition-property:background-color,color,outline-color;outline:var(--odx-focus-ring-outline)}.indicator{--size: var(--odx-size-150);display:block;margin-inline-start:auto;aspect-ratio:1;transition:var(--odx-transition-slow);transition-property:transform}:host(:not([aria-disabled=\"true\"]):hover){--_color-background: var(--odx-color-transparent-hover)}:host(:not([aria-disabled=\"true\"]):active){--_color-background: var(--odx-color-transparent-pressed)}:host([aria-disabled=\"true\"]){--_color-foreground: var(--odx-color-disabled-foreground);cursor:default}:host([aria-expanded=\"true\"]){.indicator{transform:rotateX(180deg)}}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}";
|
|
2
2
|
|
|
3
3
|
export { styles as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
const styles = ":host{--
|
|
1
|
+
const styles = ":host-context(odx-avatar-group),:host{--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3)}:host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: inherit;--_border-radius: 50%;display:flex;flex-direction:column;place-content:center;place-items:center;position:relative;user-select:none;vertical-align:middle;overflow:clip;block-size:var(--_size);inline-size:var(--_size);margin-block:var(--_spacing);font-size:var(--_font-size);border-radius:var(--_border-radius);background-color:var(--_color-background);color:var(--_color-foreground);transition:var(--odx-transition-default);transition-property:background-color,outline-color,box-shadow}:host-context(odx-avatar-group[variant=\"rectangle\"]),:host([variant=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host-context(odx-avatar-group[size=\"sm\"]),:host([size=\"sm\"]){--_size: var(--odx-size-150);--_spacing: 0;--_font-size: var(--odx-typography-font-size-1)}:host-context(odx-avatar-group[size=\"lg\"]),:host([size=\"lg\"]){--_size: var(--odx-size-300);--_spacing: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-5)}:host-context(odx-avatar-group[size=\"xl\"]),:host([size=\"xl\"]){--_size: var(--odx-size-400);--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}:host-context(odx-button){--_color-background: var(--odx-color-transparent-pressed);--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing))}:host-context(odx-button[size=\"sm\"]){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}:host-context(odx-button[size=\"lg\"]){--_size: var(--odx-size-250);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}::slotted(img){object-fit:cover;position:absolute;inset:0;z-index:1;pointer-events:none}::slotted(odx-icon){font-size:inherit}";
|
|
2
2
|
|
|
3
3
|
export { styles as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
const styles = ":host{--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--
|
|
1
|
+
const styles = ":host{--_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-5);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: var(--odx-size-37);--_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-sm);margin-block:var(--_margin-block);max-inline-size:100%;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,:host::part(anchor){display:inline-flex;place-items:center;place-content:center}:host::part(anchor){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:calc(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;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-medium);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)}.spinner{--_size: var(--_icon-size);color:var(--_color-foreground);position:absolute;margin:auto}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}: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);--_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-button-group[variant=\"success\"]),:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-background-pressed: var(--odx-color-success-pressed);--_color-foreground: var(--odx-color-foreground-dark)}:host-context(odx-button-group[variant=\"confirmation\"]),:host([variant=\"confirmation\"]){--_color-background: var(--odx-color-confirmation-rest);--_color-background-hover: var(--odx-color-confirmation-hover);--_color-background-pressed: var(--odx-color-confirmation-pressed);--_color-foreground: var(--odx-color-foreground-dark)}:host(:hover){--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([aria-busy=\"true\"]):active){--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([aria-busy=\"true\"]){--_color-background: var(--_color-background-hover);cursor:default;[part~=anchor]{color:transparent}}: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-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;--_spinner-size: var(--odx-size-37)}: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-input){--_icon-size: var(--odx-typography-font-size-5)}odx-icon,::slotted(odx-icon){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}:host-context(odx-button-group[connected]:not([vertical])):host(:not(:last-of-type))::part(anchor){border-inline-end-width:0}:host-context(odx-button-group[connected][vertical]):host(:not(:last-of-type))::part(anchor){border-block-end-width:0}";
|
|
2
2
|
|
|
3
3
|
export { styles as default };
|
|
@@ -1,12 +1,18 @@
|
|
|
1
|
-
import { CustomElement } from '@odx/foundation';
|
|
1
|
+
import { CanBeDisabled, CustomElement } from '@odx/foundation';
|
|
2
|
+
import { ButtonSize, ButtonVariant } from '../button';
|
|
2
3
|
declare global {
|
|
3
4
|
interface HTMLElementTagNameMap {
|
|
4
5
|
'odx-button-group': OdxButtonGroupComponent;
|
|
5
6
|
}
|
|
6
7
|
}
|
|
7
|
-
|
|
8
|
+
declare const OdxButtonGroupComponent_base: import('@odx/foundation').Constructor<CanBeDisabled> & typeof CustomElement;
|
|
9
|
+
export declare class OdxButtonGroupComponent extends OdxButtonGroupComponent_base {
|
|
8
10
|
block: boolean;
|
|
9
11
|
connected: boolean;
|
|
10
12
|
vertical: boolean;
|
|
13
|
+
size?: ButtonSize | null;
|
|
14
|
+
variant?: ButtonVariant | null;
|
|
15
|
+
onDisabledChanged(disabled: boolean): void;
|
|
11
16
|
}
|
|
17
|
+
export {};
|
|
12
18
|
//# sourceMappingURL=button-group.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-group.component.d.ts","sourceRoot":"","sources":["../../../components/button-group/button-group.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"button-group.component.d.ts","sourceRoot":"","sources":["../../../components/button-group/button-group.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAE9E,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAG3D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,uBAAuB,CAAC;KAC7C;CACF;;AAED,qBACa,uBAAwB,SAAQ,4BAA4B;IAEvE,KAAK,UAAS;IAGd,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAGjB,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAGzB,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAEtB,iBAAiB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;CAKpD"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CustomElement, customElement } from '@odx/foundation';
|
|
1
|
+
import { CanBeDisabled, CustomElement, customElement } from '@odx/foundation';
|
|
2
2
|
import { property } from 'lit/decorators.js';
|
|
3
3
|
import styles from './button-group.component.css.js';
|
|
4
4
|
|
|
@@ -12,13 +12,18 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
12
12
|
if (kind && result) __defProp(target, key, result);
|
|
13
13
|
return result;
|
|
14
14
|
};
|
|
15
|
-
let OdxButtonGroupComponent = class extends CustomElement {
|
|
15
|
+
let OdxButtonGroupComponent = class extends CanBeDisabled(CustomElement) {
|
|
16
16
|
constructor() {
|
|
17
17
|
super(...arguments);
|
|
18
18
|
this.block = false;
|
|
19
19
|
this.connected = false;
|
|
20
20
|
this.vertical = false;
|
|
21
21
|
}
|
|
22
|
+
onDisabledChanged(disabled) {
|
|
23
|
+
for (const button of Array.from(this.querySelectorAll("odx-button"))) {
|
|
24
|
+
button._contextDisabled = disabled;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
22
27
|
};
|
|
23
28
|
__decorateClass([
|
|
24
29
|
property({ type: Boolean, reflect: true })
|
|
@@ -29,6 +34,12 @@ __decorateClass([
|
|
|
29
34
|
__decorateClass([
|
|
30
35
|
property({ type: Boolean, reflect: true })
|
|
31
36
|
], OdxButtonGroupComponent.prototype, "vertical", 2);
|
|
37
|
+
__decorateClass([
|
|
38
|
+
property({ reflect: true })
|
|
39
|
+
], OdxButtonGroupComponent.prototype, "size", 2);
|
|
40
|
+
__decorateClass([
|
|
41
|
+
property({ reflect: true })
|
|
42
|
+
], OdxButtonGroupComponent.prototype, "variant", 2);
|
|
32
43
|
OdxButtonGroupComponent = __decorateClass([
|
|
33
44
|
customElement("odx-button-group", [styles])
|
|
34
45
|
], OdxButtonGroupComponent);
|
|
@@ -2,6 +2,8 @@ import { CustomElement } from '../models';
|
|
|
2
2
|
import { Constructor } from './dedupe-mixin';
|
|
3
3
|
export interface CanBeDisabled {
|
|
4
4
|
disabled: boolean;
|
|
5
|
+
_contextDisabled: boolean;
|
|
6
|
+
onDisabledChanged?(disabled: boolean): void;
|
|
5
7
|
}
|
|
6
8
|
export declare const CanBeDisabled: <T extends Constructor<CustomElement>>(superClass: T) => Constructor<CanBeDisabled> & T;
|
|
7
9
|
//# sourceMappingURL=can-be-disabled.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"can-be-disabled.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/can-be-disabled.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"can-be-disabled.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/can-be-disabled.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,aAAa,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KA4CjD,WAAW,CAAC,aAAa,CAAC,GAAG,CACvE,CAAC"}
|
|
@@ -16,6 +16,7 @@ const CanBeDisabled = dedupeMixin((superClass) => {
|
|
|
16
16
|
constructor() {
|
|
17
17
|
super(...arguments);
|
|
18
18
|
this.#initialTabIndex = null;
|
|
19
|
+
this._contextDisabled = false;
|
|
19
20
|
this.disabled = false;
|
|
20
21
|
}
|
|
21
22
|
#initialTabIndex;
|
|
@@ -25,13 +26,20 @@ const CanBeDisabled = dedupeMixin((superClass) => {
|
|
|
25
26
|
}
|
|
26
27
|
willUpdate(props) {
|
|
27
28
|
super.willUpdate?.(props);
|
|
28
|
-
if (props.has("disabled")) {
|
|
29
|
+
if (props.has("_contextDisabled") || props.has("disabled")) {
|
|
29
30
|
this.#handleDisableChange();
|
|
30
31
|
}
|
|
31
32
|
}
|
|
33
|
+
updated(props) {
|
|
34
|
+
super.updated?.(props);
|
|
35
|
+
if (props.has("_contextDisabled") || props.has("disabled")) {
|
|
36
|
+
this.onDisabledChanged?.(this._contextDisabled || this.disabled);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
32
39
|
#handleDisableChange() {
|
|
33
|
-
this.
|
|
34
|
-
|
|
40
|
+
const disabled = this._contextDisabled || this.disabled;
|
|
41
|
+
this.ariaDisabled = toAriaBooleanAttribute(disabled);
|
|
42
|
+
if (disabled) {
|
|
35
43
|
this.tabIndex = -1;
|
|
36
44
|
} else if (this.#initialTabIndex !== null) {
|
|
37
45
|
this.tabIndex = this.#initialTabIndex;
|
|
@@ -41,7 +49,10 @@ const CanBeDisabled = dedupeMixin((superClass) => {
|
|
|
41
49
|
}
|
|
42
50
|
}
|
|
43
51
|
__decorateClass([
|
|
44
|
-
property({ type: Boolean
|
|
52
|
+
property({ type: Boolean })
|
|
53
|
+
], CanBeDisabledElement.prototype, "_contextDisabled");
|
|
54
|
+
__decorateClass([
|
|
55
|
+
property({ type: Boolean })
|
|
45
56
|
], CanBeDisabledElement.prototype, "disabled");
|
|
46
57
|
return CanBeDisabledElement;
|
|
47
58
|
});
|
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": "0.1.0-alpha.
|
|
4
|
+
"version": "0.1.0-alpha.27",
|
|
5
5
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
7
7
|
"homepage": "https://odx.draeger.com",
|