Input: Search Focused

No notes defined.

<div class="sds-input -search -hasIcon -isFocused">
    <input id="" class="sds-input form-control" type="text" placeholder="Search" value="">

    <div class="sds-input__searchActions">
        <div class="sds-input__clearBtn">
            <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost -smaller">

                <span class="sds-icon sds-icon-close"></span>

            </button>
        </div>
        <div class="sds-input__searchBtn">
            <button type="button" class="sds-btn -btnSecondary -btnSmall" disabled>

                <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 }}"{% 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">{{ feedback }}</div>
	{% endif %}
	{% if hint %}
		<div class="{{ namespace }}input__hint">{{ hint.feedback }}</div>
	{% endif %}
	{% if message %}
		{% render '@message' %}
	{% endif %}
</div>
  • Content:
    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");
    		})
    	}
    
    }
    
  • URL: /components/raw/input/InputAutocomplete.js
  • Filesystem Path: components/base-components/atoms/forms/input/InputAutocomplete.js
  • Size: 1 KB
  • Content:
    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
    			});
    		}
    	}
    
    }
    
  • URL: /components/raw/input/InputCalendar.js
  • Filesystem Path: components/base-components/atoms/forms/input/InputCalendar.js
  • Size: 1.5 KB
  • Content:
    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'));
    				}
    			});
    		});
    	}
    
    }
  • URL: /components/raw/input/InputShadow.js
  • Filesystem Path: components/base-components/atoms/forms/input/InputShadow.js
  • Size: 707 Bytes
  • Content:
    @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;
    
    	/* 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","sys-color-text-primary-muted");
    		pointer-events: none;
    
    	}
    
    	&__iconLeft {
    		left: $input-padding-x;
    	}
    
    	&__iconRight {
    		right: $input-padding-x;
    		&.-isButton {
    			pointer-events: auto;
    		}
    	}
    
    	// input__childElement
    	&__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;
    
    		}
    
    	}
    
    	&__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;
    		color: $input-placeholder-color;
    	}
    
    	&__autocompleteInner {
    
    		box-shadow: map-deep-get($token-shadow-map, "detail");
    		display: none;
    		position: absolute;
    		top: map-deep-get($token-spacer-stack-max-map, "sm") !important;
    		left: 0 !important;
    		width: 100%;
    
    	}
    
    	&__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", "sys-color-text-neutral-vivid")
    			}
    
    		}
    
    	}
    
    	/* 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 {
    
    		&.-shown {
    
    			z-index: z("fixed");
    
    			//#{$self}__autocomplete {
    			//
    			//	z-index: z("fixed");
    			//
    			//}
    
    			#{$self}__autocompleteInner {
    
    				display: block;
    
    			}
    
    		}
    
    	}
    
    	// 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($token-font-size-map,"body","xl");
    
    			}
    
    		}
    
    	}
    
    	&.-inputXl {
    
    		#{$self}__shadowCurrency {
    
    			line-height: inherit;
    			top: -0.075em
    
    		}
    
    		.form-control,
    		#{$self}__shadowInput {
    
    			font-size: map-deep-get($token-font-size-map,"body","xl");
    			height: $input-height-xl;
    
    		}
    
    		#{$self}__iconLeft,
    		#{$self}__iconRight,
    		#{$self}__clearBtn,
    		#{$self}__searchBtn {
    
    			height: $input-height-xl;
    
    			> * {
    
    				font-size: map-deep-get($token-font-size-map,"body","xl");
    
    			}
    
    		}
    
    	}
    
    	&.-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($token-font-size-map,"body","xl");
    			}
    
    		}
    
    	}
    
    	/* 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 {
    	}
    
    }
  • URL: /components/raw/input/_input.scss
  • Filesystem Path: components/base-components/atoms/forms/input/_input.scss
  • Size: 9.9 KB