<div class="sds-input -search -hasIcon -hasValue">
<input id="" class="sds-input form-control" type="text" placeholder="Search" value="input value">
<div class="sds-input__searchActions">
<div class="sds-input__clearBtn">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost -smaller">
<span aria-hidden="true" class="sds-icon sds-icon-close"></span>
</button>
</div>
<div class="sds-input__searchBtn">
<button type="button" class="sds-btn -btnSecondary -btnSmall">
<span class="sds-btn__text">
Rechercher
</span>
</button>
</div>
</div>
<div class="sds-input__iconLeft">
<span class="sds-icon sds-icon-search"></span>
</div>
</div>
<div class="{{ namespace }}input{% for mod in parentModifiers %} {{ mod }}{% endfor %}{% for mod in parentClasses %} {{ mod }}{% endfor %}">
<input id="{{ id }}" class="{{ namespace }}input form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" type="{{ type }}" placeholder="{{ placeholder }}" value="{{ value }}"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
{% if search %}
<div class="{{ namespace }}input__searchActions">
<div class="{{ namespace }}input__clearBtn">
{% render "@icon-btn-secondary--ghost",{
icon: "icon-close",
classes: ["-smaller"]
},true %}
</div>
<div class="{{ namespace }}input__searchBtn">
{% render "@btn-secondary",searchbtnOptions,true %}
</div>
</div>
{% endif %}
{% if shadow %}
<div class="{{ namespace }}input__shadowInput form-control" aria-hidden="true">
<div class="{{ namespace }}input__shadowValue">
{{ value }}
</div>
<div class="{{ namespace }}input__shadowCurrency">
{{ valueType }}
</div>
</div>
{% endif %}
{% if icon %}
<div class="{{ namespace }}input__iconRight{% if button %} -isButton{% endif %}">
{% if button %}
{% render "@icon-btn-secondary--ghost",{
icon: "icon-trash",
disabled: disabled
},true %}
{% else %}
<span class="{{ namespace }}icon {{ namespace }}{{ icon }}"></span>
{% endif %}
</div>
{% endif %}
{% if iconLeft %}
<div class="{{ namespace }}input__iconLeft">
<span class="{{ namespace }}icon {{ namespace }}{{ iconLeft }}"></span>
</div>
{% endif %}
{% if error %}
<div class="invalid-feedback" role="alert">
{% render "@hint--error",{
text: feedback
},true %}
</div>
{% endif %}
{% if hint %}
<div class="{{ namespace }}input__hint">
{% render "@hint",{
text: hint.feedback
},true %}
</div>
{% endif %}
{% if message %}
{% render '@message' %}
{% endif %}
</div>
export default class InputAutocomplete {
constructor() {
this.toggleAutocomplete();
}
toggleAutocomplete() {
let autocmpleteTrigger = $(".sds-input.-autocomplete");
autocmpleteTrigger.find(".form-control:not([readonly])").on("focus", (e) => {
$(e.target).closest(".sds-input.-autocomplete").addClass("-shown");
$(e.target).closest(".sds-input.-autocomplete").find(".sds-input__autocompleteToggle").attr("aria-expanded", "true");
$(e.target).closest(".sds-input.-autocomplete").find(".sds-input__autocompleteInner").addClass("show");
})
autocmpleteTrigger.find(".form-control:not([readonly])").on("blur", (e) => {
$(e.target).closest(".sds-input.-autocomplete").removeClass("-shown");
$(e.target).closest(".sds-input__autocompleteToggle").attr("aria-expanded", "false");
$(e.target).closest(".sds-input.-autocomplete").find(".sds-input__autocompleteToggle").attr("aria-expanded", "false");
$(e.target).closest(".sds-input.-autocomplete").find(".sds-input__autocompleteInner").removeClass("show");
})
}
}
export default class InputCalendar {
constructor() {
this.fireCalendar();
this.fireCalendarSmall();
this.showInlineCalendar();
}
fireCalendar() {
let autocmpleteTrigger = $(".sds-input.-calendar:not(.-inline):not(.js-flatpickr):not(.js-flatpickrInline)");
if(autocmpleteTrigger.length > 0) {
autocmpleteTrigger.find("input").datepicker({
minDate: -20,
maxDate: "+1M +10D",
changeMonth: true,
changeYear: true,
dateFormat: "dd/mm/yy",
separator: "/",
showOtherMonths: true,
});
}
}
fireCalendarSmall() {
let autocmpleteTriggerSmall = $(".sds-input.-calendarSmall:not(.-inline):not(.js-flatpickr):not(.js-flatpickrInline)");
if(autocmpleteTriggerSmall.length > 0) {
autocmpleteTriggerSmall.find("input").datepicker({
minDate: -20,
maxDate: "+1M +10D",
changeMonth: true,
changeYear: true,
dateFormat: "dd/mm/yy",
separator: "/",
showOtherMonths: true,
beforeShow: function (elt,instance) {
$(instance.dpDiv).addClass("ui-calendar-small")
}
});
}
}
showInlineCalendar() {
let autocmpleteTrigger = $(".sds-input.-calendar.-inline:not(.js-flatpickr):not(.js-flatpickrInline)");
if(autocmpleteTrigger.length > 0) {
autocmpleteTrigger.datepicker({
minDate: -20,
maxDate: "+1M +10D",
changeMonth: true,
changeYear: true,
dateFormat: "dd/mm/yy",
separator: "/",
inline: true,
showOtherMonths: true
});
}
}
}
export default class InputShadow {
constructor() {
this.copyInputValueToShadowElement();
}
copyInputValueToShadowElement() {
let shadowInput = $(".sds-input.-hasShadow");
shadowInput.each((i,el) => {
if($(el).find("input").val()) {
$(el).find(".sds-input__shadowValue").text($(el).find("input").val());
} else {
$(el).find(".sds-input__shadowValue").text($(el).find("input").attr('placeholder'));
}
$(el).find("input").on("input", (e) => {
$(el).find(".sds-input__shadowValue").text($(el).find("input").val());
if($(el).find("input").val().length < 1) {
$(el).find(".sds-input__shadowValue").text($(el).find("input").attr('placeholder'));
}
});
});
}
}
@use "sass:math";
/* variables specific to current element */
$search-input-height-large: map-deep-get($token-sizes-unit-map, "56");
.#{$namespace}input {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
position: relative !important;
flex-grow: 1;
/* 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 {
}
/* children - write selector in full in comments in order to facilitate search */
&__iconLeft,
&__iconRight,
&__clearBtn,
&__searchBtn {
position: absolute;
top: 0;
height: $input-height;
display: flex;
align-items: center;
}
&__searchActions {
position: absolute;
top: 0;
right: $input-padding-x;
height: $input-height;
display: flex;
align-items: center;
#{$self}__clearBtn,
#{$self}__searchBtn {
position: relative;
top: auto !important;
right: auto !important;
}
#{$self}__searchBtn {
margin-left: map-deep-get($token-spacer-inline-map, "sm");
}
}
&__clearBtn {
right: math.div($input-padding-x, 2);
display: none;
}
&__searchBtn {
right: math.div($input-padding-x, 2);
}
&__iconLeft,
&__iconRight {
@include custom-prop-fallback("color","comp-input-icon-background-color");
pointer-events: none;
}
&__iconLeft {
left: $input-padding-x;
}
&__iconRight {
right: $input-padding-x;
&.-isButton {
pointer-events: auto;
}
}
// input__autocomplete
&__autocomplete {
position: relative;
//top: map-deep-get($token-spacer-stack-max-map, "sm");
// follows same logic as parent
.show {
float: none;
width: 100%;
top: 0;
left: 0;
right: 0;
}
.dropdown-footer {
margin: 0 calc(var(--comp-box-large-inset-h) * -1) calc(var(--comp-box-large-inset-h) * -1) !important;
bottom: calc(var(--comp-box-large-inset-h) * -1) !important;
}
}
&__autocompleteToggle {
z-index: z("low");
pointer-events: auto;
&[aria-expanded="true"] {
[class*="icon"] {
&::before {
content: map-deep-get($token-icon-map, "chevronup");
}
}
}
}
&__shadowInput {
border-bottom: 0;
position: absolute;
background-color: transparent;
z-index: z("zero");
top: 0;
left: 0;
width: 100%;
display: flex;
pointer-events: none;
padding-right: 3.125ch;
}
&__shadowValue {
color: transparent;
max-width: 100%;
}
&__shadowCurrency {
line-height: $input-line-height;
position: relative;
top: -0.025em;
margin-left: 0.125ch;
@include custom-prop-fallback("color","comp-input-shadow-text-color");
}
&__autocompleteInner {
box-shadow: map-deep-get($token-shadow-map, "detail");
display: none !important;
position: absolute;
top: map-deep-get($token-spacer-stack-max-map, "sm") !important;
left: 0 !important;
width: 100%;
overflow-y: auto;
}
&__autocompleteSelected {
padding-top: map-deep-get($token-spacer-stack-max-map, "sm");
@include spacer-component-stack("sm");
}
&__phoneWrapper {
display: flex;
}
&__phoneCustomPrefix,
&__phoneSelect {
width: 90px !important;
flex-shrink: 0;
}
&__phoneCustomPrefix {
padding-left: map-deep-get($token-spacer-unit-map, "24");
}
&__phoneNumberPrefix {
position: absolute;
display: flex;
align-items: center;
justify-content: flex-end;
left: 0;
padding-left: $input-padding-x;
height: $input-height;
}
&__hint {
@include form-feedback-hint();
}
.form-control {
&[disabled] {
+ #{$self}__shadowInput #{$self}__shadowCurrency {
@include custom-prop-fallback("color", "comp-input-disabled-icon-background-color")
}
}
}
/* modifiers */
// input -multiple
&.-multiple {
// follows same logic as base element
.form-control ~ .form-control {
height: subtract($input-height, 0.53rem);
}
> *[readonly],
> *:disabled,> *[disabled] {
border-radius: 0;
&:first-of-type {
border-top-left-radius: map-deep-get($token-radius-map, "8");
border-top-right-radius: map-deep-get($token-radius-map, "8");
}
&:last-of-type {
border-bottom-left-radius: map-deep-get($token-radius-map, "8");
border-bottom-right-radius: map-deep-get($token-radius-map, "8");
}
}
}
// input -autocomplete
&.-autocomplete {
&.show {
#{$self}__autocompleteInner {
// @TODO change structure of autocomplete
display: block !important; // because of "sds-box" display properties
}
}
&.-shown {
//#{$self}__autocomplete {
//
// z-index: z("fixed");
//
//}
#{$self}__autocompleteInner {
display: block !important;
z-index: z("sticky");
}
}
}
// input -hasIcon
&.-hasIcon {
position: relative;
&.-hasIconRight {
padding-right: $input-padding-x*5;
}
.form-control {
padding-right: map-deep-get($token-spacer-unit-map, "40");
&:focus {
+ #{$self}__iconRight {
@include custom-prop-fallback("color", "comp-input-active-border-color")
}
}
}
}
&.-hasShadow {
.form-control {
padding-right: 3.125ch;
}
.-hasIconRight {
padding-right: calc(3.125ch + ($input-padding-x*4));
~ #{$self}__shadowInput {
padding-right: calc(3.125ch + ($input-padding-x*4));
}
}
}
// input -search
&.-search {
position: relative;
flex-grow: 1;
.form-control {
flex-grow: 1;
border-radius: map-deep-get($token-radius-map, "32");
height: $input-height;
padding-left: $input-padding-x*6;
padding-right: $input-padding-x*2;
border-width: $input-border-width*2;
border-style: solid;
@include custom-prop-fallback("border-color", "comp-input-border-color");
@include form-control-focus($ignore-warning: true);
&:focus {
border-color: $border-color;
}
}
#{$self}__iconLeft {
@include custom-prop-fallback("color","sys-color-text-primary-muted");
left: $input-padding-x*2;
}
#{$self}__searchBtn {
display: none;
}
#{$self}__searchBtn,
#{$self}__clearBtn {
height: $input-height;
}
&.-isFocused {
.form-control {
padding-right: $input-padding-x*14;
background-color: $input-bg;
@include custom-prop-fallback("background-color", "comp-input-background-color");
border-color: $border-color;
}
#{$self}__searchBtn {
display: inline-flex;
}
}
&.-hasValue {
#{$self}__clearBtn {
display: inline-flex;
}
}
&.-bgWhite {
.form-control {
background-color: map-deep-get($token-color-grayscale-map, "0");
border-color: map-deep-get($token-color-grayscale-map, "0");
&:focus {
box-shadow: map-deep-get($token-shadow-map, "active");
border-color: map-deep-get($token-color-grayscale-map, "0") !important;
}
}
&.-isFocused {
.form-control {
box-shadow: map-deep-get($token-shadow-map, "active");
border-color: map-deep-get($token-color-grayscale-map, "0");
}
}
}
&.-large {
.form-control,
#{$self}__iconLeft,
#{$self}__iconRight,
#{$self}__clearBtn,
#{$self}__searchBtn,
#{$self}__searchActions {
height: $search-input-height-large;
}
#{$self}__searchBtn,
#{$self}__searchActions {
right: math.div($search-input-height-large - map-deep-get($token-button-size-big-map, "mobile" ,"min-height"),2);
}
}
&.-noBorder {
.form-control {
border-color: transparent;
@include form-control-focus($ignore-warning: true);
}
}
}
// input -calendar
&.-calendarSmall,
&.-calendar {
position: relative;
.form-control {
&[disabled] {
~ #{$self}__iconRight * {
color: $input-disabled-color;
}
}
&[readonly] {
pointer-events: none;
~ #{$self}__iconRight * {
color: $input-disabled-color;
}
}
}
}
// input -phone
&.-phone {
#{$self}__phoneCustomPrefixWrapper {
display: none;
}
&.-phoneCustomPrefix {
#{$self}__phoneSelect {
display: none;
}
#{$self}__phoneCustomPrefixWrapper {
display: block;
}
}
&.is-invalid {
.invalid-feedback {
display: block;
}
}
}
&.-inputLg {
#{$self}__shadowCurrency {
line-height: inherit;
top: 0.15em;
}
.form-control,
#{$self}__shadowInput {
font-size: $font-size-lg-max;
height: $input-height-lg;
}
#{$self}__iconLeft,
#{$self}__iconRight,
#{$self}__clearBtn,
#{$self}__searchBtn {
height: $input-height-lg;
> * {
font-size: map-deep-get($design-tokens, "sys-font-size-body-extra-large-max");
}
}
}
&.-inputXl {
#{$self}__shadowCurrency {
line-height: inherit;
top: -0.075em
}
.form-control,
#{$self}__shadowInput {
font-size: map-deep-get($design-tokens, "sys-font-size-body-extra-large-max");
height: $input-height-xl;
}
#{$self}__iconLeft,
#{$self}__iconRight,
#{$self}__clearBtn,
#{$self}__searchBtn {
height: $input-height-xl;
> * {
font-size: map-deep-get($design-tokens, "sys-font-size-body-extra-large-max");
}
}
}
&.-input2xl,
&.-inputXxl {
#{$self}__shadowCurrency {
line-height: inherit;
}
.form-control,
#{$self}__shadowInput {
@extend %textBodyXxl;
height: subtract($input-height-2xl, $border-width);
font-weight: map-deep-get($token-font-weight-map, "regular");
@include media-breakpoint-up(xl) {
height: $input-height-2xl;
}
#{$self}__shadowCurrency {
top: -0.055em;
}
}
#{$self}__iconLeft,
#{$self}__iconRight,
#{$self}__clearBtn,
#{$self}__searchBtn {
height: subtract($input-height-2xl, $border-width);
@extend %textBodyXxl;
@include media-breakpoint-up(xl) {
height: $input-height-2xl;
}
> * {
font-size: map-deep-get($design-tokens, "sys-font-size-body-extra-large-max");
}
}
}
/* Chrome, Safari, Edge, Opera */
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
&[type="number"] {
-moz-appearance: textfield;
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
//&:placeholder-shown,
&:focus {
~ #{$self}__shadowValue {
display: none;
}
}
&:active {
}
&:focus,
&:active {
}
}