Input: Readonly

'autocomplete' attribute and its relative value to be added optionally depending on the use of the field (See https://accessibilite.public.lu/fr/raweb1/glossaire.html) 
<div class="sds-input">
    <input id="" class="sds-input form-control" type="text" placeholder="Entrez une communication" value="Read only content" readonly>

</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>
  • 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;
	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 {
	}

}
  • URL: /components/raw/input/_input.scss
  • Filesystem Path: components/base-components/atoms/forms/input/_input.scss
  • Size: 10.4 KB