@odx/foundation 1.0.0-beta.21 → 1.0.0-beta.23
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.
|
@@ -13,11 +13,11 @@ declare const InteractiveElement_base: import('../../lib/main.js').Constructor<i
|
|
|
13
13
|
* @slot suffix - Contains the button's icon or state indicator, e.g. a spinner.
|
|
14
14
|
* @slot - Contains button text
|
|
15
15
|
*/
|
|
16
|
-
export declare class InteractiveElement extends InteractiveElement_base
|
|
16
|
+
export declare class InteractiveElement extends InteractiveElement_base {
|
|
17
17
|
#private;
|
|
18
18
|
static readonly styles: import('lit').CSSResult;
|
|
19
19
|
nativeElement: HTMLButtonElement | HTMLAnchorElement;
|
|
20
|
-
loaderSlot?: 'prefix' | 'suffix';
|
|
20
|
+
loaderSlot?: 'prefix' | 'suffix' | 'default';
|
|
21
21
|
lineClamp: 1 | 2;
|
|
22
22
|
protected render(): TemplateResult;
|
|
23
23
|
protected renderContent(withSpinner?: boolean): TemplateResult;
|
package/dist/cdk.js
CHANGED
|
@@ -580,7 +580,7 @@ class DragController {
|
|
|
580
580
|
}
|
|
581
581
|
}
|
|
582
582
|
|
|
583
|
-
const styles$2 = "@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);--_min-inline-size: var(--odx-size-500);--_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);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,[part=base]{display:inline-flex;place-items:center;place-content:center}[part=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)}}[part=base]::-moz-focus-inner{padding:0;border:0}[part=loader]{--_size: calc(var(--_icon-size) - var(--odx-size-25));color:var(--_color-foreground);margin-inline:calc(var(--_margin-icon) + var(--odx-size-
|
|
583
|
+
const styles$2 = "@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);--_min-inline-size: var(--odx-size-500);--_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);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,[part=base]{display:inline-flex;place-items:center;place-content:center}[part=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)}}[part=base]::-moz-focus-inner{padding:0;border:0}[part=loader]{--_size: calc(var(--_icon-size) - var(--odx-size-25));color:var(--_color-foreground);margin-inline:calc(var(--_margin-icon) + var(--odx-size-12))}[part=label]{margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline)}:is(odx-icon),::slotted(:is(odx-avatar,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%}::slotted(odx-avatar){--_color-background: var(--odx-color-transparent-pressed);--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing))}}@layer state{:host(:not([aria-busy=\"true\"])) [part=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([aria-busy=\"true\"])) [part=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))}}";
|
|
584
584
|
|
|
585
585
|
var __defProp$3 = Object.defineProperty;
|
|
586
586
|
var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
|
|
@@ -712,6 +712,9 @@ renderSlot_fn = function(name, force) {
|
|
|
712
712
|
return html`<slot name=${optionalAttr(name)}></slot>`;
|
|
713
713
|
};
|
|
714
714
|
isLoaderSlot_fn = function(name) {
|
|
715
|
+
if (name === void 0 && this.loaderSlot === "default") {
|
|
716
|
+
return true;
|
|
717
|
+
}
|
|
715
718
|
return name === (this.loaderSlot || Object.values(["prefix", "suffix"]).find((slot) => getAssignedElements(this, slot).length > 0));
|
|
716
719
|
};
|
|
717
720
|
InteractiveElement.styles = unsafeCSS(styles$2);
|
package/dist/components.js
CHANGED
|
@@ -56,10 +56,10 @@ let OdxAccordionHeader = class extends CanBeExpanded(CustomElement) {
|
|
|
56
56
|
<odx-list-item
|
|
57
57
|
part="base"
|
|
58
58
|
exportparts="expand-control"
|
|
59
|
+
role="none"
|
|
59
60
|
compact
|
|
60
61
|
?disabled=${this.disabled}
|
|
61
62
|
?expanded=${this.expanded}
|
|
62
|
-
role="presentation"
|
|
63
63
|
?with-expand-indicator=${!!this.panel}
|
|
64
64
|
@toggle=${__privateGet$r(this, _handleToggle$1)}
|
|
65
65
|
>
|
|
@@ -555,7 +555,7 @@ const AreaHeaderVariant = {
|
|
|
555
555
|
DEFAULT: "default"
|
|
556
556
|
};
|
|
557
557
|
|
|
558
|
-
const styles$14 = "@layer base{:host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_border-radius:
|
|
558
|
+
const styles$14 = "@layer base{:host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_border-radius: var(--odx-border-radius-circle);--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3)}:host{display:flex;flex-direction:column;place-content:center;place-items:center;position:relative;user-select:none;vertical-align:middle;overflow:clip;flex:0 0 auto;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}::slotted(img){object-fit:cover;position:absolute;inset:var(--odx-size-12);border-radius:var(--_border-radius);z-index:1;pointer-events:none;inline-size:calc(100% - var(--odx-size-25))}::slotted(odx-icon){font-size:inherit}}@layer variant{:host([shape=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"secondary\"]){--_color-background: var(--odx-experience-color-secondary-rest)}:host([size=\"sm\"]){--_size: var(--odx-size-150);--_spacing: 0;--_font-size: var(--odx-typography-font-size-1);::slotted(img){inset:var(--odx-size-px);inline-size:calc(100% - var(--odx-size-12))}}:host([size=\"lg\"]){--_size: var(--odx-size-300);--_spacing: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_size: var(--odx-size-400);--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}}";
|
|
559
559
|
|
|
560
560
|
var __defProp$1e = Object.defineProperty;
|
|
561
561
|
var __getOwnPropDesc$1e = Object.getOwnPropertyDescriptor;
|
|
@@ -840,9 +840,7 @@ OdxButtonGroup = __decorateClass$19([
|
|
|
840
840
|
customElement("odx-button-group", [styles$$])
|
|
841
841
|
], OdxButtonGroup);
|
|
842
842
|
|
|
843
|
-
const
|
|
844
|
-
|
|
845
|
-
const styles$_ = "@layer base{[part~=base]{font-weight:var(--odx-typography-font-weight-medium)}}@layer variant{:host([block]){display:flex}:host([size=\"xs\"]){--odx-focus-ring-offset: 0;--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_margin-block: 0;--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);::slotted(odx-avatar){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}}:host([size=\"sm\"]){--odx-focus-ring-offset: 0;--_block-size: var(--odx-size-200);--_margin-icon: calc(-1 * var(--odx-size-25) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-150)}: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;::slotted(odx-avatar){--_size: var(--odx-size-250);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}}: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([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([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([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([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)}}";
|
|
843
|
+
const styles$_ = "@layer base{[part~=base]{font-weight:var(--odx-typography-font-weight-medium)}::slotted(odx-avatar){--_color-foreground: inherit}}@layer variant{:host([block]){display:flex}:host([size=\"xs\"]){--odx-focus-ring-offset: 0;--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_margin-block: 0;--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);::slotted(odx-avatar){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}}:host([size=\"sm\"]){--odx-focus-ring-offset: 0;--_block-size: var(--odx-size-200);--_margin-icon: calc(-1 * var(--odx-size-25) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-150)}: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;::slotted(odx-avatar){--_size: var(--odx-size-250);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}}: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([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([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([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([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)}}";
|
|
846
844
|
|
|
847
845
|
var __defProp$18 = Object.defineProperty;
|
|
848
846
|
var __getOwnPropDesc$18 = Object.getOwnPropertyDescriptor;
|
|
@@ -909,7 +907,7 @@ __decorateClass$18([
|
|
|
909
907
|
property({ reflect: true })
|
|
910
908
|
], OdxButton.prototype, "variant", 2);
|
|
911
909
|
OdxButton = __decorateClass$18([
|
|
912
|
-
customElement("odx-button", [
|
|
910
|
+
customElement("odx-button", [styles$_])
|
|
913
911
|
], OdxButton);
|
|
914
912
|
|
|
915
913
|
const ButtonSize = {
|
|
@@ -1074,7 +1072,7 @@ OdxCheckbox = __decorateClass$15([
|
|
|
1074
1072
|
customElement("odx-checkbox", [styles$X])
|
|
1075
1073
|
], OdxCheckbox);
|
|
1076
1074
|
|
|
1077
|
-
const styles$W = ":host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_font-size: var(--odx-font-size-text-sm);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;place-items:center;background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);gap:var(--odx-size-25);block-size:var(--_block-size);border-radius:var(--_border-radius);color:var(--_color-foreground);outline-offset:var(--odx-focus-ring-offset)}:host,.content,.action{transition:var(--odx-transition-reduced);transition-property:color background-color outline-color}:host,.action{outline:var(--odx-focus-ring-outline)}:host(:focus-visible),.action:focus-visible{outline-color:var(--odx-focus-ring-color)}.content{min-inline-size:var(--odx-size-150);user-select:none;text-align:center;line-height:inherit}.action,::slotted(odx-icon){font-size:var(--odx-font-size-text-md);block-size:var(--_block-size);inline-size:var(--_block-size);color:inherit;outline-offset:calc(-1 * var(--odx-focus-ring-offset))}.action{background-color:var(--_color-background);border:none;border-radius:var(--_border-radius);cursor:pointer;margin-inline-end:calc(-1 * var(--_padding-inline));padding:0}.action:hover{background-color:var(--_color-background-hover)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"
|
|
1075
|
+
const styles$W = ":host{--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-foreground: var(--odx-experience-color-secondary-foreground);--_font-size: var(--odx-font-size-text-sm);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;place-items:center;background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);gap:var(--odx-size-25);block-size:var(--_block-size);border-radius:var(--_border-radius);color:var(--_color-foreground);outline-offset:var(--odx-focus-ring-offset)}:host,.content,.action{transition:var(--odx-transition-reduced);transition-property:color background-color outline-color}:host,.action{outline:var(--odx-focus-ring-outline)}:host(:focus-visible),.action:focus-visible{outline-color:var(--odx-focus-ring-color)}.content{min-inline-size:var(--odx-size-150);user-select:none;text-align:center;line-height:inherit}.action,::slotted(odx-icon){font-size:var(--odx-font-size-text-md);block-size:var(--_block-size);inline-size:var(--_block-size);color:inherit;outline-offset:calc(-1 * var(--odx-focus-ring-offset))}.action{background-color:var(--_color-background);border:none;border-radius:var(--_border-radius);cursor:pointer;margin-inline-end:calc(-1 * var(--_padding-inline));padding:0}.action:hover{background-color:var(--_color-background-hover)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-foreground: var(--odx-color-success-text)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-warning-rest);--_color-background-hover: var(--odx-color-warning-hover);--_color-foreground: var(--odx-color-warning-text)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);.action{pointer-events:none}}:host([interactive]:not([interactive=\"false\"])){cursor:pointer}:host([interactive]:not([interactive=\"false\"]):hover){--_color-background: var(--_color-background-hover)}:host([aria-disabled=\"true\"][interactive]:not([interactive=\"false\"])){--_color-background: var(--odx-color-disabled-fill);cursor:not-allowed}";
|
|
1078
1076
|
|
|
1079
1077
|
var __defProp$14 = Object.defineProperty;
|
|
1080
1078
|
var __getOwnPropDesc$14 = Object.getOwnPropertyDescriptor;
|
|
@@ -1458,11 +1456,11 @@ let OdxCombobox = class extends ListboxFormControl {
|
|
|
1458
1456
|
}
|
|
1459
1457
|
this.dropdown.showPopover();
|
|
1460
1458
|
});
|
|
1461
|
-
__privateAdd$n(this, _handleControlInput, (
|
|
1459
|
+
__privateAdd$n(this, _handleControlInput, () => {
|
|
1462
1460
|
if (this.dropdown.isPopoverOpen()) return;
|
|
1463
1461
|
this.dropdown.showPopover();
|
|
1464
1462
|
});
|
|
1465
|
-
__privateAdd$n(this, _handleControlClear, (
|
|
1463
|
+
__privateAdd$n(this, _handleControlClear, () => {
|
|
1466
1464
|
if (!this.dropdown.isPopoverOpen()) return;
|
|
1467
1465
|
this.dropdown.hidePopover();
|
|
1468
1466
|
});
|
|
@@ -2024,7 +2022,7 @@ OdxHighlight = __decorateClass$R([
|
|
|
2024
2022
|
customElement("odx-highlight", [styles$M])
|
|
2025
2023
|
], OdxHighlight);
|
|
2026
2024
|
|
|
2027
|
-
const styles$L = ":host{--icon-rotation: 0deg}[part=icon]{transition:inherit;transition-property:transform;transform:rotate(var(--icon-rotation))}";
|
|
2025
|
+
const styles$L = "@layer base{:host{--icon-rotation: 0deg}[part=icon]{transition:inherit;transition-property:transform;transform:rotate(var(--icon-rotation))}}@layer variant{:host([float]){border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-shadow-level-3);margin:var(--odx-size-100)}}";
|
|
2028
2026
|
|
|
2029
2027
|
var __defProp$Q = Object.defineProperty;
|
|
2030
2028
|
var __getOwnPropDesc$Q = Object.getOwnPropertyDescriptor;
|
|
@@ -2037,9 +2035,17 @@ var __decorateClass$Q = (decorators, target, key, kind) => {
|
|
|
2037
2035
|
return result;
|
|
2038
2036
|
};
|
|
2039
2037
|
let OdxIconButton = class extends OdxButton {
|
|
2038
|
+
constructor() {
|
|
2039
|
+
super(...arguments);
|
|
2040
|
+
this.float = false;
|
|
2041
|
+
}
|
|
2040
2042
|
renderContent() {
|
|
2041
2043
|
return html`
|
|
2042
|
-
|
|
2044
|
+
${when(
|
|
2045
|
+
this.loading,
|
|
2046
|
+
() => this.renderLoader(),
|
|
2047
|
+
() => html`<odx-icon name=${optionalAttr(this.icon)} part="icon"></odx-icon>`
|
|
2048
|
+
)}
|
|
2043
2049
|
<odx-visually-hidden>
|
|
2044
2050
|
<slot></slot>
|
|
2045
2051
|
</odx-visually-hidden>
|
|
@@ -2047,6 +2053,9 @@ let OdxIconButton = class extends OdxButton {
|
|
|
2047
2053
|
`;
|
|
2048
2054
|
}
|
|
2049
2055
|
};
|
|
2056
|
+
__decorateClass$Q([
|
|
2057
|
+
property({ type: Boolean, reflect: true })
|
|
2058
|
+
], OdxIconButton.prototype, "float", 2);
|
|
2050
2059
|
__decorateClass$Q([
|
|
2051
2060
|
property()
|
|
2052
2061
|
], OdxIconButton.prototype, "icon", 2);
|
|
@@ -2602,7 +2611,7 @@ OdxLoadingOverlay = __decorateClass$J([
|
|
|
2602
2611
|
customElement("odx-loading-overlay", [styles$E])
|
|
2603
2612
|
], OdxLoadingOverlay);
|
|
2604
2613
|
|
|
2605
|
-
const styles$D = "@layer base{:host{--_animation-duration: 1.5s;--_animation-delay: 0s;--_size: var(--odx-size-225);--_space: var(--odx-size-37);--_track-size: calc(var(--odx-size-37) - var(--odx-size-px));--_track-color: var(--odx-color-transparent-pressed);display:flex;place-content:center;place-items:center;color:inherit;font-size:var(--_size);block-size:1em}.base{display:block;block-size:100%;inline-size:100%;aspect-ratio:1;animation:loading-spinner-rotation-animation 1.5s linear infinite}:host(:not([variant=\"dots\"])){inline-size:1em;.track,.indicator{stroke-width:var(--_track-size)}.track{stroke:var(--_track-color)}.indicator{stroke:currentColor;color:inherit;stroke-dasharray:90,180;stroke-dashoffset:-5;animation:loading-spinner-animation 1.5s ease-in-out infinite;stroke-linecap:round}:not(svg){transform-origin:0px 0px}}:host([variant=\"dots\"]){gap:calc(var(--_space) / 2);padding:var(--_space);animation:loading-spinner-dots-entry-animation .25s linear both;.indicator{background-color:currentColor;border-radius:
|
|
2614
|
+
const styles$D = "@layer base{:host{--_animation-duration: 1.5s;--_animation-delay: 0s;--_size: var(--odx-size-225);--_space: var(--odx-size-37);--_track-size: calc(var(--odx-size-37) - var(--odx-size-px));--_track-color: var(--odx-color-transparent-pressed);display:flex;place-content:center;place-items:center;color:inherit;font-size:var(--_size);block-size:1em}.base{display:block;block-size:100%;inline-size:100%;aspect-ratio:1;animation:loading-spinner-rotation-animation 1.5s linear infinite}:host(:not([variant=\"dots\"])){inline-size:1em;.track,.indicator{stroke-width:var(--_track-size)}.track{stroke:var(--_track-color)}.indicator{stroke:currentColor;color:inherit;stroke-dasharray:90,180;stroke-dashoffset:-5;animation:loading-spinner-animation 1.5s ease-in-out infinite;stroke-linecap:round}:not(svg){transform-origin:0px 0px}}:host([variant=\"dots\"]){gap:calc(var(--_space) / 2);padding:var(--_space);animation:loading-spinner-dots-entry-animation .25s linear both;.indicator{background-color:currentColor;border-radius:var(--odx-border-radius-circle);block-size:calc(var(--_size) / 3);flex:0 0 calc(var(--_size) / 3);z-index:3;animation:loading-spinner-dots-animation var(--_animation-duration) var(--_animation-delay) infinite cubic-bezier(.96,.21,.41,.76) forwards;&:nth-child(1){--_animation-delay: calc(-1 * var(--_animation-duration) / 6)}&:nth-child(2){--_animation-delay: calc(-1 * var(--_animation-duration) / 12)}&:nth-child(3){--_animation-delay: 0s}}}}@keyframes loading-spinner-animation{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes loading-spinner-rotation-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loading-spinner-dots-entry-animation{0%{opacity:0}to{opacity:1}}@keyframes loading-spinner-dots-animation{0%,75%,to{transform:scale(.667);background-color:var(--odx-color-transparent-pressed)}50%{transform:scale(1);background-color:currentColor}}";
|
|
2606
2615
|
|
|
2607
2616
|
var __defProp$I = Object.defineProperty;
|
|
2608
2617
|
var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
|
|
@@ -3259,7 +3268,7 @@ OdxOption = __decorateClass$w([
|
|
|
3259
3268
|
customElement("odx-option", [styles$u])
|
|
3260
3269
|
], OdxOption);
|
|
3261
3270
|
|
|
3262
|
-
const styles$t = ":host{display:grid;inline-size:100%;grid-template-columns:minmax(0px,auto) minmax(0px,100%) minmax(0px,auto);grid-template-rows:minmax(0px,auto) minmax(0px,1fr) minmax(0px,auto);grid-template-areas:\"navigation header sidebar\" \"navigation content sidebar\" \"footer footer footer\";justify-content:start;padding-inline:var(--odx-size-75);max-inline-size:var(--max-inline-size)}.header,.navigation,.sidebar{background-color:var(--odx-color-background-cool);position:sticky;inset-block-start:var(--scroll-margin-block-start);z-index:98}.navigation,.sidebar{--_size: calc(100dvh - var(--scroll-margin-block-start));max-block-size:var(--_size);inset-block-end:0;overflow:auto}.content{grid-area:content;margin-block-end:var(--odx-size-150)}.footer{grid-area:footer}.header{grid-area:header}.navigation{grid-area:navigation;padding-inline-end:var(--odx-size-75)}.sidebar{grid-area:sidebar;padding-inline-start:var(--odx-size-75)}";
|
|
3271
|
+
const styles$t = ":host{display:grid;inline-size:100%;grid-template-columns:minmax(0px,auto) minmax(0px,100%) minmax(0px,auto);grid-template-rows:minmax(0px,auto) minmax(0px,1fr) minmax(0px,auto);grid-template-areas:\"navigation header sidebar\" \"navigation content sidebar\" \"footer footer footer\";justify-content:start;padding-inline:var(--odx-size-75);max-inline-size:var(--max-inline-size)}.header,.navigation,.sidebar{background-color:var(--odx-color-background-cool);position:sticky;inset-block-start:var(--scroll-margin-block-start);z-index:98}.navigation,.sidebar{--_size: calc(100dvh - var(--scroll-margin-block-start));max-block-size:var(--_size);inset-block-end:0;overflow:auto}.content{display:flex;flex-direction:column;grid-area:content;margin-block-end:var(--odx-size-150)}.footer{grid-area:footer}.header{grid-area:header}.navigation{grid-area:navigation;padding-inline-end:var(--odx-size-75)}.sidebar{grid-area:sidebar;padding-inline-start:var(--odx-size-75)}";
|
|
3263
3272
|
|
|
3264
3273
|
var __defProp$v = Object.defineProperty;
|
|
3265
3274
|
var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
|
|
@@ -3988,7 +3997,7 @@ const SkeletonShape = {
|
|
|
3988
3997
|
RECTANGLE: "rectangle"
|
|
3989
3998
|
};
|
|
3990
3999
|
|
|
3991
|
-
const styles$i = "*{margin:0;padding:0;box-sizing:border-box}:host{--_thumb-color: var(--_track-color);--_thumb-size: var(--odx-size-150);--_previous-position: 0%;--_position: 0%;--_next-position: 0%;display:contents}:host::part(track),:host::part(thumb),:host::part(label){position:absolute}:host::part(track),:host::part(label){pointer-events:none}:host::part(thumb),:host::part(label){background-color:var(--_thumb-color);inset-inline-start:var(--_position)}:host::part(track){background-color:var(--_track-color);border-radius:var(--_track-size);inset:0 calc(100% - var(--_position)) 0 var(--_previous-position);z-index:var(--_layer-background)}:host::part(thumb){display:flex;place-content:center;place-items:center;border-radius:
|
|
4000
|
+
const styles$i = "*{margin:0;padding:0;box-sizing:border-box}:host{--_thumb-color: var(--_track-color);--_thumb-size: var(--odx-size-150);--_previous-position: 0%;--_position: 0%;--_next-position: 0%;display:contents}:host::part(track),:host::part(thumb),:host::part(label){position:absolute}:host::part(track),:host::part(label){pointer-events:none}:host::part(thumb),:host::part(label){background-color:var(--_thumb-color);inset-inline-start:var(--_position)}:host::part(track){background-color:var(--_track-color);border-radius:var(--_track-size);inset:0 calc(100% - var(--_position)) 0 var(--_previous-position);z-index:var(--_layer-background)}:host::part(thumb){display:flex;place-content:center;place-items:center;border-radius:var(--odx-border-radius-circle);block-size:var(--_thumb-size);inline-size:var(--_thumb-size);inset-block-start:50%;cursor:grab;transform:translate(-50%,-50%);z-index:var(--_layer-interactive);box-shadow:var(--odx-shadow-level-0);outline:0 solid var(--odx-palette-cyan-50-15)}:host::part(label){inset-block-end:100%;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(0);opacity:0;border-radius:var(--odx-border-radius-sm);color:var(--odx-color-foreground-light);padding-inline:var(--odx-size-50);line-height:var(--odx-size-150);z-index:var(--_layer-foreground)}:host::part(with-motion){transition:var(--odx-transition-reduced)}:host([odx-drag-active])::part(with-motion){transition-property:outline}:host::part(thumb):active,:host(:active)::part(thumb){outline-width:var(--odx-size-75)}:host(:hover),:host(:focus-within){--_thumb-color: var(--odx-color-highlight-rest)}:host(:focus-within)::part(label),:host(:hover)::part(label){opacity:1;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(1)}:host([aria-disabled=\"true\"]){pointer-events:none}:host([aria-disabled=\"true\"])::part(thumb){--_thumb-color: var(--odx-color-disabled-fill);z-index:var(--_layer-interactive-disabled)}";
|
|
3992
4001
|
|
|
3993
4002
|
const SliderLabelVisibility = {
|
|
3994
4003
|
AUTO: "auto",
|
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-beta.
|
|
4
|
+
"version": "1.0.0-beta.23",
|
|
5
5
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
7
7
|
"homepage": "https://odx.draeger.com",
|