You will have to use a label with text for this component to work.
<label class="sds-switch -loading" for="loadingSwitchDisabled">
<input type="checkbox" class="sds-switch__input custom-control-input" id="loadingSwitchDisabled" disabled>
<span class="sds-switch__shape custom-control custom-switch">
<span aria-hidden="true" class="sds-switch__text sds-switch__textActive">OUI</span>
<span aria-hidden="true" class="sds-switch__text sds-switch__textInactive">NON</span>
</span>
</label>
<label class="{{ namespace }}switch{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" for="{{ id }}">
<input type="checkbox" class="{{ namespace }}switch__input custom-control-input" id="{{ id }}"{% if disabled %} disabled{% endif %}{% if checked %} checked{% endif %}>
{% if outsideLabel %}
<span class="{{ namespace }}switch__outsideLabel">{{ outsideLabel }}</span>
{% else %}
{% endif %}
<span class="{{ namespace }}switch__shape custom-control custom-switch">
{% if textInside %}
<span aria-hidden="true" class="{{ namespace }}switch__text {{ namespace }}switch__textActive">{{ textActive }}</span>
<span aria-hidden="true" class="{{ namespace }}switch__text {{ namespace }}switch__textInactive">{{ textInactive }}</span>
{% endif %}
</span>
</label>
@use "sass:math";
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}switch {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
display: flex;
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
}
/* children - write selector in full in comments in order to facilitate search */
// switch__input
&__input {
&:checked ~ #{$self}__shape {
position: relative;
@include custom-prop-fallback("background-color", "comp-switch-checked-background-color");
@include custom-prop-fallback("color", "comp-switch-checked-large-text-color");
&::after {
transform: translateX($custom-switch-width - $custom-control-indicator-size*2 + $custom-control-indicator-border-width * 2);
@include custom-prop-fallback-box-shadow-color(0, $border-width*2, $border-width*4, 0 ,"comp-switch-checked-knob-shadow-color")
}
#{$self}__textActive {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
#{$self}__textInactive {
transform: translateX(100%);
//opacity: 0;
//visibility: hidden;
}
}
&:disabled {
~ #{$self}__shape {
cursor: not-allowed;
pointer-events: none;
@include custom-prop-fallback("background-color", "comp-switch-disabled-background-color");
@include custom-prop-fallback("color", "sys-color-text-neutral-vivid");
&::after {
@include custom-prop-fallback("background-color", "comp-switch-disabled-knob-background-color");
}
}
&:checked ~ #{$self}__shape {
@include custom-prop-fallback("background-color", "comp-switch-checked-disabled-background-color");
@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
&::after {
@include custom-prop-fallback("background-color", "comp-switch-checked-disabled-knob-background-color");
}
}
}
}
// switch__shape
&__shape {
// follows same logic as parent
width: $custom-switch-width;
height: map-deep-get($token-button-size-big-map, "mobile", "min-height");
min-height: 0;
@include custom-prop-fallback("background-color", "comp-switch-background-color");
@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
border-radius: $custom-switch-indicator-border-radius;
@extend %textHelper;
font-weight: map-deep-get($token-font-weight-map, "semi-bold");
overflow: hidden;
cursor: pointer;
flex-shrink: 0;
&::after {
content: "";
position: absolute;
z-index: z("low");
top: $custom-control-indicator-border-width;
left: $custom-control-indicator-border-width;
width: $custom-switch-indicator-size;
height: $custom-switch-indicator-size;
@include custom-prop-fallback("background-color", "comp-switch-knob-background-color");
// stylelint-disable-next-line property-disallowed-list
border-radius: $custom-switch-indicator-border-radius;
@include transition(transform .15s ease-in-out, $custom-forms-transition);
@include custom-prop-fallback-box-shadow-color(0, $border-width*2, $border-width*4, 0 ,"comp-switch-knob-shadow-color")
}
}
&__text {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: transform 0.15s linear;
}
&__textActive {
padding-right: $custom-switch-indicator-size;
transform: translateX(-100%);
}
&__textInactive {
padding-left: $custom-switch-indicator-size;
}
/* modifiers */
// switch -loading
&.-loading {
// follows same logic as base element
#{$self}__shape {
transform: translateZ(0);
cursor: not-allowed;
&::before {
content: '';
@include btn-loading-state(map-deep-get($token-sizes-unit-map, "8"), inherit, 1.35s);
@include custom-prop-fallback("background-color", "sys-color-background-neutral-100");
z-index: z("zero");
}
&::after {
transform: translateX(($custom-switch-width*0.5) - ($custom-control-indicator-size*0.5) - ($custom-control-indicator-border-width * 2));
transform: translateX( calc( (var(--comp-switch-large-width) * 0.5) - (var(--comp-switch-large-knob-width) * 0.5) - #{$custom-control-indicator-border-width}) );
}
}
#{$self}__input {
&:checked ~ #{$self}__shape {
&::before {
@include custom-prop-fallback("background-color", "sys-color-background-status-success-90");
}
}
}
#{$self}__textActive {
transform: translateX(-100%);
}
#{$self}__textInactive {
transform: translateX(100%);
}
#{$self}__input:checked ~ #{$self}__shape {
#{$self}__textActive {
transform: translateX(-100%);
}
#{$self}__textInactive {
transform: translateX(100%);
}
}
}
&.-small {
display: inline-flex;
align-items: center;
#{$self}__input:checked ~ #{$self}__shape {
&::after {
transform: translateX($custom-switch-width-small - ($custom-switch-indicator-size-small*2) + ($custom-control-indicator-border-width*2));
}
}
#{$self}__shape {
@include custom-prop-fallback("width","comp-switch-width",false);
@include custom-prop-fallback("height","comp-switch-height",false);
&::after {
top: $custom-control-indicator-border-width * 0.5;
left: $custom-control-indicator-border-width * 0.5;
@include custom-prop-fallback("width","comp-switch-knob-width",false);
@include custom-prop-fallback("height","comp-switch-knob-height",false);
}
}
#{$self}__outsideLabel {
@include custom-prop-fallback("color", "sys-color-text-primary-muted");
font-weight: map-deep-get($token-font-weight-map, "bold");
@extend %textHelperSmall;
margin-right: map-deep-get($token-spacer-unit-map, "8");
cursor: pointer;
}
&.-loading {
#{$self}__input:checked ~ #{$self}__shape,
#{$self}__shape {
&::after {
transform: translateX($custom-switch-width-small*0.5 - ($custom-switch-indicator-size-small*0.5) - #{$custom-control-indicator-border-width*0.5});
transform: translateX(calc(var(--comp-switch-width)*0.5 - (var(--comp-switch-knob-width)*0.5) - #{$custom-control-indicator-border-width*0.5}));
}
}
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}
$('.bcee-form-toggle:not([disabled])').each(function (aIndex,aElement) {
var element = $(aElement);
element.on('click',function (event) {
if(!element.hasClass('loading')){
element.toggleClass('active');
}
});
});