@leanix/components 0.4.970 → 0.4.972
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.
|
@@ -9978,11 +9978,11 @@ class SwitchComponent {
|
|
|
9978
9978
|
setTimeout(() => checkbox.focus(), 150);
|
|
9979
9979
|
}
|
|
9980
9980
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9981
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SwitchComponent, isStandalone: true, selector: "lx-switch", inputs: { value: "value", size: "size", disabled: "disabled", label: "label", labelInFront: "labelInFront", elementId: "elementId" }, outputs: { toggle: "toggle" }, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "<div\n class=\"wrapper\"\n [class.withLabel]=\"label\"\n [class.withLabelBehind]=\"label && !labelInFront\"\n [class.disabled]=\"disabled\"\n [attr.id]=\"id\"\n [class.small]=\"size === 'small'\"\n>\n @if (label) {\n <span class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n }\n <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n <input\n #inputRef\n type=\"checkbox\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n (click)=\"onClickBlur(inputRef)\"\n (change)=\"onToggle()\"\n (keydown.space)=\"focus(inputRef)\"\n (keydown.enter)=\"onToggle()\"\n />\n <span class=\"slider\"></span>\n </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:flex;align-items:center;justify-content:space-between;gap:4px}.wrapper.withLabel{flex-direction:row}.wrapper.withLabelBehind{flex-direction:row-reverse}:host:where(:not(.lxFioriReskin)) .disabled{opacity:.5}:host:where(:not(.lxFioriReskin)) .disabled .slider{cursor:default}:host:where(:not(.lxFioriReskin)) .checkbox{position:relative;display:inline-block;margin:0}:host:where(:not(.lxFioriReskin)) .labelText{color:#2a303d}:host:where(:not(.lxFioriReskin)) .labelText.off{color:#526179}:host:where(:not(.lxFioriReskin)) input{opacity:0;width:0;height:0;margin:0;padding:0}:host:where(:not(.lxFioriReskin)) .small.checkbox{width:22px;height:14px}:host:where(:not(.lxFioriReskin)) .small.wrapper:not(.withLabel){height:14px}:host:where(:not(.lxFioriReskin)) .small .labelText{font-size:var(--lxFontSize, 14px)}:host:where(:not(.lxFioriReskin)) .small .slider{border-radius:7px}:host:where(:not(.lxFioriReskin)) .small .slider:before{height:12px;width:12px;left:1px;bottom:1px}:host:where(:not(.lxFioriReskin)) .small input:checked+.slider:before{transform:translate(8px)}:host:where(:not(.lxFioriReskin)) input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}:host:where(:not(.lxFioriReskin)) .slider{position:absolute;cursor:pointer;inset:0;background-color:#b2bccc;transition:transform .2s}:host:where(:not(.lxFioriReskin)) .slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}:host:where(:not(.lxFioriReskin)) input:checked+.slider{background-color:#33cc58}:host(.lxFioriReskin) .wrapper{font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .labelText{color:var(--sapTextColor)}:host(.lxFioriReskin) .labelText.off{color:var(--sapTextColor)}:host(.lxFioriReskin) .disabled{opacity:var(--sapContent_DisabledOpacity)}:host(.lxFioriReskin) .disabled .slider{cursor:default}:host(.lxFioriReskin) .checkbox{position:relative;display:inline-block;margin:0;opacity:1}:host(.lxFioriReskin) input{opacity:0;width:0;height:0;margin:0;padding:0}:host(.lxFioriReskin) .small.checkbox{width:2.75rem;height:1.25rem}:host(.lxFioriReskin) .small.wrapper:not(.withLabel){height:1.25rem}:host(.lxFioriReskin) .small .slider{border-radius:.75rem}:host(.lxFioriReskin) .small .slider:before{width:1.25rem;height:1rem;left:.125rem;top:50%;bottom:auto;transform:translateY(-50%)}:host(.lxFioriReskin) .small input:checked+.slider:before{transform:translateY(-50%) translate(1.25rem)}:host(.lxFioriReskin) .slider{position:absolute;cursor:pointer;inset:0;background-color:var(--
|
|
9981
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SwitchComponent, isStandalone: true, selector: "lx-switch", inputs: { value: "value", size: "size", disabled: "disabled", label: "label", labelInFront: "labelInFront", elementId: "elementId" }, outputs: { toggle: "toggle" }, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "<div\n class=\"wrapper\"\n [class.withLabel]=\"label\"\n [class.withLabelBehind]=\"label && !labelInFront\"\n [class.disabled]=\"disabled\"\n [attr.id]=\"id\"\n [class.small]=\"size === 'small'\"\n>\n @if (label) {\n <span class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n }\n <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n <input\n #inputRef\n type=\"checkbox\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n (click)=\"onClickBlur(inputRef)\"\n (change)=\"onToggle()\"\n (keydown.space)=\"focus(inputRef)\"\n (keydown.enter)=\"onToggle()\"\n />\n <span class=\"slider\"></span>\n </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:flex;align-items:center;justify-content:space-between;gap:4px}.wrapper.withLabel{flex-direction:row}.wrapper.withLabelBehind{flex-direction:row-reverse}:host:where(:not(.lxFioriReskin)) .disabled{opacity:.5}:host:where(:not(.lxFioriReskin)) .disabled .slider{cursor:default}:host:where(:not(.lxFioriReskin)) .checkbox{position:relative;display:inline-block;margin:0}:host:where(:not(.lxFioriReskin)) .labelText{color:#2a303d}:host:where(:not(.lxFioriReskin)) .labelText.off{color:#526179}:host:where(:not(.lxFioriReskin)) input{opacity:0;width:0;height:0;margin:0;padding:0}:host:where(:not(.lxFioriReskin)) .small.checkbox{width:22px;height:14px}:host:where(:not(.lxFioriReskin)) .small.wrapper:not(.withLabel){height:14px}:host:where(:not(.lxFioriReskin)) .small .labelText{font-size:var(--lxFontSize, 14px)}:host:where(:not(.lxFioriReskin)) .small .slider{border-radius:7px}:host:where(:not(.lxFioriReskin)) .small .slider:before{height:12px;width:12px;left:1px;bottom:1px}:host:where(:not(.lxFioriReskin)) .small input:checked+.slider:before{transform:translate(8px)}:host:where(:not(.lxFioriReskin)) input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}:host:where(:not(.lxFioriReskin)) .slider{position:absolute;cursor:pointer;inset:0;background-color:#b2bccc;transition:transform .2s}:host:where(:not(.lxFioriReskin)) .slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}:host:where(:not(.lxFioriReskin)) input:checked+.slider{background-color:#33cc58}:host(.lxFioriReskin) .wrapper{font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .labelText{color:var(--sapTextColor)}:host(.lxFioriReskin) .labelText.off{color:var(--sapTextColor)}:host(.lxFioriReskin) .disabled{opacity:var(--sapContent_DisabledOpacity)}:host(.lxFioriReskin) .disabled .slider{cursor:default}:host(.lxFioriReskin) .checkbox{position:relative;display:inline-block;margin:0;opacity:1}:host(.lxFioriReskin) input{opacity:0;width:0;height:0;margin:0;padding:0}:host(.lxFioriReskin) .small.checkbox{width:2.75rem;height:1.25rem}:host(.lxFioriReskin) .small.wrapper:not(.withLabel){height:1.25rem}:host(.lxFioriReskin) .small .slider{border-radius:.75rem}:host(.lxFioriReskin) .small .slider:before{width:1.25rem;height:1rem;left:.125rem;top:50%;bottom:auto;transform:translateY(-50%)}:host(.lxFioriReskin) .small input:checked+.slider:before{transform:translateY(-50%) translate(1.25rem)}:host(.lxFioriReskin) .slider{position:absolute;cursor:pointer;inset:0;background-color:var(--sapButton_Track_Background);border:.0625rem solid var(--sapButton_Track_BorderColor);box-sizing:border-box}:host(.lxFioriReskin) .slider:before{position:absolute;content:\"\";border-radius:1rem;background-color:var(--sapButton_Handle_Background);border:.125rem solid var(--sapButton_Handle_BorderColor);box-sizing:border-box;transition:transform .1s ease-in}:host(.lxFioriReskin) .slider:after{position:absolute;content:\"\";pointer-events:none;width:1rem;height:1rem;top:50%;left:.25rem;transform:translateY(-50%);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23131e29' d='M454 275H58q-11 0-18.5-7T32 250t7.5-18.5T58 224h396q11 0 18.5 7.5T480 250t-7.5 18-18.5 7z'/%3E%3C/svg%3E\");background-size:contain;background-repeat:no-repeat;background-position:center;transition:transform .1s ease-in}:host(.lxFioriReskin) .checkbox:hover input:not(:disabled):not(:checked)+.slider{background-color:var(--sapButton_Track_Hover_Background);border-color:var(--sapButton_Track_Hover_BorderColor)}:host(.lxFioriReskin) .checkbox:hover input:not(:disabled):not(:checked)+.slider:before{background-color:var(--sapButton_Handle_Hover_Background);box-shadow:0 0 0 .125rem var(--sapButton_Handle_Hover_BorderColor)}:host(.lxFioriReskin) input:checked+.slider{background-color:var(--sapButton_Track_Selected_Background);border-color:var(--sapButton_Track_Selected_BorderColor)}:host(.lxFioriReskin) input:checked+.slider:before{background-color:var(--sapButton_Handle_Selected_Background);border-color:var(--sapButton_Handle_Selected_BorderColor)}:host(.lxFioriReskin) input:checked+.slider:after{transform:translateY(-50%) translate(1.25rem);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%230064d9' d='M187 416q-12 0-20-9L71 299q-7-7-7-17 0-11 7.5-18.5T90 256q12 0 19 9l77 87 217-247q8-9 19-9t18.5 7.5T448 122q0 10-6 16L206 407q-7 9-19 9z'/%3E%3C/svg%3E\")}:host(.lxFioriReskin) .checkbox:hover input:checked:not(:disabled)+.slider{background-color:var(--sapButton_Track_Selected_Hover_Background);border-color:var(--sapButton_Track_Selected_Hover_BorderColor)}:host(.lxFioriReskin) .checkbox:hover input:checked:not(:disabled)+.slider:before{background-color:var(--sapButton_Handle_Selected_Hover_Background);box-shadow:0 0 0 .125rem var(--sapButton_Handle_Selected_Hover_BorderColor)}:host(.lxFioriReskin) input:focus+.slider{outline:.125rem solid var(--sapContent_FocusColor);outline-offset:.125rem;border-radius:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9982
9982
|
}
|
|
9983
9983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
9984
9984
|
type: Component,
|
|
9985
|
-
args: [{ selector: 'lx-switch', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: FioriReskinAwareDirective }], template: "<div\n class=\"wrapper\"\n [class.withLabel]=\"label\"\n [class.withLabelBehind]=\"label && !labelInFront\"\n [class.disabled]=\"disabled\"\n [attr.id]=\"id\"\n [class.small]=\"size === 'small'\"\n>\n @if (label) {\n <span class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n }\n <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n <input\n #inputRef\n type=\"checkbox\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n (click)=\"onClickBlur(inputRef)\"\n (change)=\"onToggle()\"\n (keydown.space)=\"focus(inputRef)\"\n (keydown.enter)=\"onToggle()\"\n />\n <span class=\"slider\"></span>\n </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:flex;align-items:center;justify-content:space-between;gap:4px}.wrapper.withLabel{flex-direction:row}.wrapper.withLabelBehind{flex-direction:row-reverse}:host:where(:not(.lxFioriReskin)) .disabled{opacity:.5}:host:where(:not(.lxFioriReskin)) .disabled .slider{cursor:default}:host:where(:not(.lxFioriReskin)) .checkbox{position:relative;display:inline-block;margin:0}:host:where(:not(.lxFioriReskin)) .labelText{color:#2a303d}:host:where(:not(.lxFioriReskin)) .labelText.off{color:#526179}:host:where(:not(.lxFioriReskin)) input{opacity:0;width:0;height:0;margin:0;padding:0}:host:where(:not(.lxFioriReskin)) .small.checkbox{width:22px;height:14px}:host:where(:not(.lxFioriReskin)) .small.wrapper:not(.withLabel){height:14px}:host:where(:not(.lxFioriReskin)) .small .labelText{font-size:var(--lxFontSize, 14px)}:host:where(:not(.lxFioriReskin)) .small .slider{border-radius:7px}:host:where(:not(.lxFioriReskin)) .small .slider:before{height:12px;width:12px;left:1px;bottom:1px}:host:where(:not(.lxFioriReskin)) .small input:checked+.slider:before{transform:translate(8px)}:host:where(:not(.lxFioriReskin)) input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}:host:where(:not(.lxFioriReskin)) .slider{position:absolute;cursor:pointer;inset:0;background-color:#b2bccc;transition:transform .2s}:host:where(:not(.lxFioriReskin)) .slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}:host:where(:not(.lxFioriReskin)) input:checked+.slider{background-color:#33cc58}:host(.lxFioriReskin) .wrapper{font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .labelText{color:var(--sapTextColor)}:host(.lxFioriReskin) .labelText.off{color:var(--sapTextColor)}:host(.lxFioriReskin) .disabled{opacity:var(--sapContent_DisabledOpacity)}:host(.lxFioriReskin) .disabled .slider{cursor:default}:host(.lxFioriReskin) .checkbox{position:relative;display:inline-block;margin:0;opacity:1}:host(.lxFioriReskin) input{opacity:0;width:0;height:0;margin:0;padding:0}:host(.lxFioriReskin) .small.checkbox{width:2.75rem;height:1.25rem}:host(.lxFioriReskin) .small.wrapper:not(.withLabel){height:1.25rem}:host(.lxFioriReskin) .small .slider{border-radius:.75rem}:host(.lxFioriReskin) .small .slider:before{width:1.25rem;height:1rem;left:.125rem;top:50%;bottom:auto;transform:translateY(-50%)}:host(.lxFioriReskin) .small input:checked+.slider:before{transform:translateY(-50%) translate(1.25rem)}:host(.lxFioriReskin) .slider{position:absolute;cursor:pointer;inset:0;background-color:var(--
|
|
9985
|
+
args: [{ selector: 'lx-switch', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: FioriReskinAwareDirective }], template: "<div\n class=\"wrapper\"\n [class.withLabel]=\"label\"\n [class.withLabelBehind]=\"label && !labelInFront\"\n [class.disabled]=\"disabled\"\n [attr.id]=\"id\"\n [class.small]=\"size === 'small'\"\n>\n @if (label) {\n <span class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n }\n <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n <input\n #inputRef\n type=\"checkbox\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n (click)=\"onClickBlur(inputRef)\"\n (change)=\"onToggle()\"\n (keydown.space)=\"focus(inputRef)\"\n (keydown.enter)=\"onToggle()\"\n />\n <span class=\"slider\"></span>\n </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:flex;align-items:center;justify-content:space-between;gap:4px}.wrapper.withLabel{flex-direction:row}.wrapper.withLabelBehind{flex-direction:row-reverse}:host:where(:not(.lxFioriReskin)) .disabled{opacity:.5}:host:where(:not(.lxFioriReskin)) .disabled .slider{cursor:default}:host:where(:not(.lxFioriReskin)) .checkbox{position:relative;display:inline-block;margin:0}:host:where(:not(.lxFioriReskin)) .labelText{color:#2a303d}:host:where(:not(.lxFioriReskin)) .labelText.off{color:#526179}:host:where(:not(.lxFioriReskin)) input{opacity:0;width:0;height:0;margin:0;padding:0}:host:where(:not(.lxFioriReskin)) .small.checkbox{width:22px;height:14px}:host:where(:not(.lxFioriReskin)) .small.wrapper:not(.withLabel){height:14px}:host:where(:not(.lxFioriReskin)) .small .labelText{font-size:var(--lxFontSize, 14px)}:host:where(:not(.lxFioriReskin)) .small .slider{border-radius:7px}:host:where(:not(.lxFioriReskin)) .small .slider:before{height:12px;width:12px;left:1px;bottom:1px}:host:where(:not(.lxFioriReskin)) .small input:checked+.slider:before{transform:translate(8px)}:host:where(:not(.lxFioriReskin)) input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}:host:where(:not(.lxFioriReskin)) .slider{position:absolute;cursor:pointer;inset:0;background-color:#b2bccc;transition:transform .2s}:host:where(:not(.lxFioriReskin)) .slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}:host:where(:not(.lxFioriReskin)) input:checked+.slider{background-color:#33cc58}:host(.lxFioriReskin) .wrapper{font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .labelText{color:var(--sapTextColor)}:host(.lxFioriReskin) .labelText.off{color:var(--sapTextColor)}:host(.lxFioriReskin) .disabled{opacity:var(--sapContent_DisabledOpacity)}:host(.lxFioriReskin) .disabled .slider{cursor:default}:host(.lxFioriReskin) .checkbox{position:relative;display:inline-block;margin:0;opacity:1}:host(.lxFioriReskin) input{opacity:0;width:0;height:0;margin:0;padding:0}:host(.lxFioriReskin) .small.checkbox{width:2.75rem;height:1.25rem}:host(.lxFioriReskin) .small.wrapper:not(.withLabel){height:1.25rem}:host(.lxFioriReskin) .small .slider{border-radius:.75rem}:host(.lxFioriReskin) .small .slider:before{width:1.25rem;height:1rem;left:.125rem;top:50%;bottom:auto;transform:translateY(-50%)}:host(.lxFioriReskin) .small input:checked+.slider:before{transform:translateY(-50%) translate(1.25rem)}:host(.lxFioriReskin) .slider{position:absolute;cursor:pointer;inset:0;background-color:var(--sapButton_Track_Background);border:.0625rem solid var(--sapButton_Track_BorderColor);box-sizing:border-box}:host(.lxFioriReskin) .slider:before{position:absolute;content:\"\";border-radius:1rem;background-color:var(--sapButton_Handle_Background);border:.125rem solid var(--sapButton_Handle_BorderColor);box-sizing:border-box;transition:transform .1s ease-in}:host(.lxFioriReskin) .slider:after{position:absolute;content:\"\";pointer-events:none;width:1rem;height:1rem;top:50%;left:.25rem;transform:translateY(-50%);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23131e29' d='M454 275H58q-11 0-18.5-7T32 250t7.5-18.5T58 224h396q11 0 18.5 7.5T480 250t-7.5 18-18.5 7z'/%3E%3C/svg%3E\");background-size:contain;background-repeat:no-repeat;background-position:center;transition:transform .1s ease-in}:host(.lxFioriReskin) .checkbox:hover input:not(:disabled):not(:checked)+.slider{background-color:var(--sapButton_Track_Hover_Background);border-color:var(--sapButton_Track_Hover_BorderColor)}:host(.lxFioriReskin) .checkbox:hover input:not(:disabled):not(:checked)+.slider:before{background-color:var(--sapButton_Handle_Hover_Background);box-shadow:0 0 0 .125rem var(--sapButton_Handle_Hover_BorderColor)}:host(.lxFioriReskin) input:checked+.slider{background-color:var(--sapButton_Track_Selected_Background);border-color:var(--sapButton_Track_Selected_BorderColor)}:host(.lxFioriReskin) input:checked+.slider:before{background-color:var(--sapButton_Handle_Selected_Background);border-color:var(--sapButton_Handle_Selected_BorderColor)}:host(.lxFioriReskin) input:checked+.slider:after{transform:translateY(-50%) translate(1.25rem);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%230064d9' d='M187 416q-12 0-20-9L71 299q-7-7-7-17 0-11 7.5-18.5T90 256q12 0 19 9l77 87 217-247q8-9 19-9t18.5 7.5T448 122q0 10-6 16L206 407q-7 9-19 9z'/%3E%3C/svg%3E\")}:host(.lxFioriReskin) .checkbox:hover input:checked:not(:disabled)+.slider{background-color:var(--sapButton_Track_Selected_Hover_Background);border-color:var(--sapButton_Track_Selected_Hover_BorderColor)}:host(.lxFioriReskin) .checkbox:hover input:checked:not(:disabled)+.slider:before{background-color:var(--sapButton_Handle_Selected_Hover_Background);box-shadow:0 0 0 .125rem var(--sapButton_Handle_Selected_Hover_BorderColor)}:host(.lxFioriReskin) input:focus+.slider{outline:.125rem solid var(--sapContent_FocusColor);outline-offset:.125rem;border-radius:1rem}\n"] }]
|
|
9986
9986
|
}], propDecorators: { value: [{
|
|
9987
9987
|
type: Input
|
|
9988
9988
|
}], size: [{
|