@tedi-design-system/angular 8.1.0-rc.20 → 8.1.0-rc.21
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.
|
@@ -4697,12 +4697,11 @@ class FloatingButtonComponent {
|
|
|
4697
4697
|
* Overrides the button's CSS `z-index`. Defaults to `--z-index-feedback` when omitted.
|
|
4698
4698
|
*/
|
|
4699
4699
|
zIndex = input(...(ngDevMode ? [undefined, { debugName: "zIndex" }] : []));
|
|
4700
|
-
// Keep CSS classes distinct while the Community FloatingButton is still available.
|
|
4701
4700
|
classes = computed(() => [
|
|
4702
|
-
"tedi-
|
|
4703
|
-
`tedi-
|
|
4704
|
-
`tedi-
|
|
4705
|
-
`tedi-
|
|
4701
|
+
"tedi-floating-button",
|
|
4702
|
+
`tedi-floating-button--${this.variant()}`,
|
|
4703
|
+
`tedi-floating-button--${this.size()}`,
|
|
4704
|
+
`tedi-floating-button--${this.axis()}`,
|
|
4706
4705
|
].join(" "), ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
4707
4706
|
/**
|
|
4708
4707
|
* Uses the separate `translate` property for centering, while the vertical
|
|
@@ -4728,10 +4727,10 @@ class FloatingButtonComponent {
|
|
|
4728
4727
|
};
|
|
4729
4728
|
}, ...(ngDevMode ? [{ debugName: "placementStyles" }] : []));
|
|
4730
4729
|
ngOnInit() {
|
|
4731
|
-
this.baseButton.classNamePrefix.set("tedi-
|
|
4730
|
+
this.baseButton.classNamePrefix.set("tedi-floating-button");
|
|
4732
4731
|
}
|
|
4733
4732
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FloatingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4734
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: FloatingButtonComponent, isStandalone: true, selector: "[tedi-floating-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.position": "position()", "style.z-index": "zIndex()", "style.top": "placementStyles().top", "style.bottom": "placementStyles().bottom", "style.left": "placementStyles().left", "style.right": "placementStyles().right", "style.translate": "placementStyles().translate" } }, hostDirectives: [{ directive: BaseButtonDirective }], ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-
|
|
4733
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: FloatingButtonComponent, isStandalone: true, selector: "[tedi-floating-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.position": "position()", "style.z-index": "zIndex()", "style.top": "placementStyles().top", "style.bottom": "placementStyles().bottom", "style.left": "placementStyles().left", "style.right": "placementStyles().right", "style.translate": "placementStyles().translate" } }, hostDirectives: [{ directive: BaseButtonDirective }], ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-floating-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-floating-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-floating-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-floating-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-floating-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-floating-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-floating-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-floating-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-floating-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}.tedi-floating-button{z-index:var(--z-index-feedback);box-sizing:border-box;text-wrap:wrap;box-shadow:0 4px 10px 0 var(--general-effect-colors-elevation-general-secondary)}.tedi-floating-button--vertical{flex-shrink:0;white-space:nowrap;border-radius:var(--button-radius-sm) var(--button-radius-sm) 0 0;box-shadow:-4px 0 10px 0 var(--general-effect-colors-elevation-general-secondary);transform-origin:center;rotate:-90deg}.tedi-floating-button--primary{--_btn-bg: var(--button-floating-primary-background-default);--_btn-border: var(--button-floating-primary-border-default);--_btn-text: var(--button-floating-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-floating-button--primary{--_btn-hover-bg: var(--button-floating-primary-background-hover, var(--button-floating-primary-background-default));--_btn-hover-border: var(--button-floating-primary-border-hover, var(--button-floating-primary-border-default));--_btn-hover-text: var(--button-floating-primary-text-hover, var(--button-floating-primary-text-default))}.tedi-floating-button--primary{--_btn-focus-bg: var(--button-floating-primary-background-focus, var(--button-floating-primary-background-default));--_btn-focus-border: var(--button-floating-primary-border-focus, var(--button-floating-primary-border-default));--_btn-focus-text: var(--button-floating-primary-text-focus, var(--button-floating-primary-text-default))}.tedi-floating-button--primary{--_btn-active-bg: var(--button-floating-primary-background-active, var(--button-floating-primary-background-default));--_btn-active-border: var(--button-floating-primary-border-active, var(--button-floating-primary-border-default));--_btn-active-text: var(--button-floating-primary-text-active, var(--button-floating-primary-text-default))}.tedi-floating-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-floating-button--secondary{--_btn-bg: var(--button-floating-secondary-background-default);--_btn-border: var(--button-floating-secondary-border-default);--_btn-text: var(--button-floating-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-floating-button--secondary{--_btn-hover-bg: var(--button-floating-secondary-background-hover, var(--button-floating-secondary-background-default));--_btn-hover-border: var(--button-floating-secondary-border-hover, var(--button-floating-secondary-border-default));--_btn-hover-text: var(--button-floating-secondary-text-hover, var(--button-floating-secondary-text-default))}.tedi-floating-button--secondary{--_btn-focus-bg: var(--button-floating-secondary-background-focus, var(--button-floating-secondary-background-default));--_btn-focus-border: var(--button-floating-secondary-border-focus, var(--button-floating-secondary-border-default));--_btn-focus-text: var(--button-floating-secondary-text-focus, var(--button-floating-secondary-text-default))}.tedi-floating-button--secondary{--_btn-active-bg: var(--button-floating-secondary-background-active, var(--button-floating-secondary-background-default));--_btn-active-border: var(--button-floating-secondary-border-active, var(--button-floating-secondary-border-default));--_btn-active-text: var(--button-floating-secondary-text-active, var(--button-floating-secondary-text-default))}.tedi-floating-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-floating-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-floating-button--large{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-xl-inner-spacing);--_btn-padding-y: var(--button-xl-padding-y);--_btn-padding-x: var(--button-xl-padding-x)}.tedi-floating-button--large.tedi-floating-button--icon-only{width:var(--button-xl-icon-size);height:var(--button-xl-icon-size);padding:var(--button-xl-icon-padding)}.tedi-floating-button:not(.tedi-floating-button--icon-only){min-width:var(--button-width-min);max-width:var(--button-width-max)}.tedi-floating-button--vertical:not(.tedi-floating-button--icon-only){width:max-content}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4735
4734
|
}
|
|
4736
4735
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FloatingButtonComponent, decorators: [{
|
|
4737
4736
|
type: Component,
|
|
@@ -4744,7 +4743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
4744
4743
|
"[style.left]": "placementStyles().left",
|
|
4745
4744
|
"[style.right]": "placementStyles().right",
|
|
4746
4745
|
"[style.translate]": "placementStyles().translate",
|
|
4747
|
-
}, styles: [".tedi-
|
|
4746
|
+
}, styles: [".tedi-floating-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-floating-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-floating-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-floating-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-floating-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-floating-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-floating-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-floating-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-floating-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}.tedi-floating-button{z-index:var(--z-index-feedback);box-sizing:border-box;text-wrap:wrap;box-shadow:0 4px 10px 0 var(--general-effect-colors-elevation-general-secondary)}.tedi-floating-button--vertical{flex-shrink:0;white-space:nowrap;border-radius:var(--button-radius-sm) var(--button-radius-sm) 0 0;box-shadow:-4px 0 10px 0 var(--general-effect-colors-elevation-general-secondary);transform-origin:center;rotate:-90deg}.tedi-floating-button--primary{--_btn-bg: var(--button-floating-primary-background-default);--_btn-border: var(--button-floating-primary-border-default);--_btn-text: var(--button-floating-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-floating-button--primary{--_btn-hover-bg: var(--button-floating-primary-background-hover, var(--button-floating-primary-background-default));--_btn-hover-border: var(--button-floating-primary-border-hover, var(--button-floating-primary-border-default));--_btn-hover-text: var(--button-floating-primary-text-hover, var(--button-floating-primary-text-default))}.tedi-floating-button--primary{--_btn-focus-bg: var(--button-floating-primary-background-focus, var(--button-floating-primary-background-default));--_btn-focus-border: var(--button-floating-primary-border-focus, var(--button-floating-primary-border-default));--_btn-focus-text: var(--button-floating-primary-text-focus, var(--button-floating-primary-text-default))}.tedi-floating-button--primary{--_btn-active-bg: var(--button-floating-primary-background-active, var(--button-floating-primary-background-default));--_btn-active-border: var(--button-floating-primary-border-active, var(--button-floating-primary-border-default));--_btn-active-text: var(--button-floating-primary-text-active, var(--button-floating-primary-text-default))}.tedi-floating-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-floating-button--secondary{--_btn-bg: var(--button-floating-secondary-background-default);--_btn-border: var(--button-floating-secondary-border-default);--_btn-text: var(--button-floating-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-floating-button--secondary{--_btn-hover-bg: var(--button-floating-secondary-background-hover, var(--button-floating-secondary-background-default));--_btn-hover-border: var(--button-floating-secondary-border-hover, var(--button-floating-secondary-border-default));--_btn-hover-text: var(--button-floating-secondary-text-hover, var(--button-floating-secondary-text-default))}.tedi-floating-button--secondary{--_btn-focus-bg: var(--button-floating-secondary-background-focus, var(--button-floating-secondary-background-default));--_btn-focus-border: var(--button-floating-secondary-border-focus, var(--button-floating-secondary-border-default));--_btn-focus-text: var(--button-floating-secondary-text-focus, var(--button-floating-secondary-text-default))}.tedi-floating-button--secondary{--_btn-active-bg: var(--button-floating-secondary-background-active, var(--button-floating-secondary-background-default));--_btn-active-border: var(--button-floating-secondary-border-active, var(--button-floating-secondary-border-default));--_btn-active-text: var(--button-floating-secondary-text-active, var(--button-floating-secondary-text-default))}.tedi-floating-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-floating-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-floating-button--large{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-xl-inner-spacing);--_btn-padding-y: var(--button-xl-padding-y);--_btn-padding-x: var(--button-xl-padding-x)}.tedi-floating-button--large.tedi-floating-button--icon-only{width:var(--button-xl-icon-size);height:var(--button-xl-icon-size);padding:var(--button-xl-icon-padding)}.tedi-floating-button:not(.tedi-floating-button--icon-only){min-width:var(--button-width-min);max-width:var(--button-width-max)}.tedi-floating-button--vertical:not(.tedi-floating-button--icon-only){width:max-content}\n"] }]
|
|
4748
4747
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }] } });
|
|
4749
4748
|
|
|
4750
4749
|
/**
|