No notes defined.
<!-- Default -->
<div class="sds-input">
<input id="" class="sds-input form-control" type="text" placeholder="Entrez une communication" value="">
</div>
<!-- Shadow -->
<div class="sds-input -hasShadow">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="4000">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
4000
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
<!-- Shadow Icon -->
<div class="sds-input -hasShadow">
<input id="" class="sds-input form-control -hasIcon -hasIconRight" type="number" placeholder="0" value="4000">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
4000
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
<div class="sds-input__iconRight -isButton">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">
<span class="sds-icon sds-icon-trash"></span>
</button>
</div>
</div>
<!-- Shadow Large -->
<div class="sds-input -hasShadow -inputLg">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
<!-- Shadow Xl -->
<div class="sds-input -hasShadow -inputXl">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
<!-- Shadow 2 Xl -->
<div class="sds-input -hasShadow -input2xl">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
<!-- Calendar -->
<div class="sds-input -hasIcon -calendar">
<input class="sds-input form-control" type="text" placeholder="11/04/2023" value="">
<div class="sds-input__iconRight">
<span class="sds-icon sds-icon-calendar"></span>
</div>
</div>
<!-- Calendar Small -->
<div class="sds-input -hasIcon -calendarSmall">
<input class="sds-input form-control" type="text" placeholder="11/04/2023" value="">
<div class="sds-input__iconRight">
<span class="sds-icon sds-icon-calendar"></span>
</div>
</div>
<!-- Calendar Inline -->
<div class="sds-input -hasIcon -calendar -inline">
<input class="sds-input form-control" type="text" placeholder="11/04/2023" value="">
<div class="sds-input__iconRight">
<span class="sds-icon sds-icon-calendar"></span>
</div>
</div>
<!-- Disabled -->
<div class="sds-input">
<input id="" class="sds-input form-control" type="text" placeholder="Entrez une communication" value="Disabled content" disabled>
</div>
<!-- Disabled Icon -->
<div class="sds-input">
<input id="" class="sds-input form-control -hasIcon -hasIconRight" type="text" placeholder="Entrez une communication" value="Disabled content" disabled>
<div class="sds-input__iconRight -isButton">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost" disabled>
<span class="sds-icon sds-icon-trash"></span>
</button>
</div>
</div>
<!-- Readonly -->
<div class="sds-input">
<input id="" class="sds-input form-control" type="text" placeholder="Entrez une communication" value="Read only content" readonly>
</div>
<!-- Icon Right -->
<div class="sds-input">
<input id="" class="sds-input form-control -hasIcon -hasIconRight" type="text" placeholder="Entrez une communication" value="">
<div class="sds-input__iconRight -isButton">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">
<span class="sds-icon sds-icon-trash"></span>
</button>
</div>
</div>
<!-- Error -->
<div class="sds-input">
<input id="" class="sds-input form-control is-invalid" type="text" placeholder="Entrez une communication" value="">
<div class="invalid-feedback">Error in entered value</div>
</div>
<!-- Hint -->
<div class="sds-input">
<input id="" class="sds-input form-control" type="text" placeholder="Entrez une communication" value="">
<div class="sds-input__hint">Votre plage horaire est comprise entre 7:00 et 19:00</div>
</div>
<!-- Multiple -->
<div class="sds-input -multiple">
<input class="sds-input__field form-control" type="text" placeholder="Entrez une communication" value="">
<input class="sds-input__field form-control" type="text" placeholder="" value="">
<input class="sds-input__field form-control" type="text" placeholder="" value="">
<input class="sds-input__field form-control" type="text" placeholder="" value="">
</div>
<!-- Multiple Disabled -->
<div class="sds-input -multiple">
<input class="sds-input form-control" type="text" placeholder="Entrez une communication" value="" disabled>
<input class="sds-input form-control" type="text" placeholder="" value="" disabled>
<input class="sds-input form-control" type="text" placeholder="" value="" disabled>
</div>
<!-- Autocomplete -->
<div class="sds-input -autocomplete">
<input class="sds-input form-control" type="text" placeholder="Sélectionnez un compte" value="">
<div class="sds-input__autocomplete">
<form class="sds-input__autocompleteInner sds-box -insetLg sds-stackMd" action="">
<div class="h3">Comptes de la société</div>
<div class="sds-stackSm">
<div class="h4">Comptes et cartes</div>
<div class="sds-accountSelector__dropdownSection sds-stackSm">
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id="" checked><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-amount -positive -amountLg">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</label>
</div>
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-amount -positive -amountLg">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</label>
</div>
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-amount -positive -amountLg">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</label>
</div>
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-badge badge -badgePrimary -badgeTonal">
non visible
</div>
</label>
</div>
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-badge badge -badgePrimary -badgeTonal">
non visible
</div>
</label>
</div>
</div>
</div>
<div class="sds-stackSm">
<div class="h4">Epargne</div>
<div class="sds-accountSelector__dropdownSection sds-stackSm">
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-amount -positive -amountLg">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</label>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- Autocomplete Selected -->
<div class="sds-input -autocomplete">
<input class="sds-input form-control" type="text" placeholder="Sélectionnez un compte" value="LU55 0030 0566 9076 0000">
<div class="sds-input__autocomplete">
<div class="sds-input__autocompleteSelected">
<div class="sds-dismissibleAccountCard">
<div class="sds-dismissibleAccountCard__content sds-stackXxs">
<div>Compte Epicerie Fournisseurs</div>
<div class="sds-dismissibleAccountCard__meta sds-textHelper">LU55 0030 0566 9076 0000</div>
</div>
<div class="d-flex flex-column align-items-end">
<div class="sds-badge badge -badgePrimary -badgeTonal">
non visible
</div>
</div>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall">
<span class="sds-icon sds-icon-close"></span>
</button>
</div>
</div>
<form class="sds-input__autocompleteInner sds-box -insetLg sds-stackMd" action="">
<div class="h3">Comptes de la société</div>
<div class="sds-stackSm">
<div class="h4">Comptes et cartes</div>
<div class="sds-accountSelector__dropdownSection sds-stackSm">
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id="" checked><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-amount -positive -amountLg">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</label>
</div>
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-amount -positive -amountLg">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</label>
</div>
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-badge badge -badgePrimary -badgeTonal">
non visible
</div>
</label>
</div>
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-badge badge -badgePrimary -badgeTonal">
non visible
</div>
</label>
</div>
</div>
</div>
<div class="sds-stackSm">
<div class="h4">Epargne</div>
<div class="sds-accountSelector__dropdownSection sds-stackSm">
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-amount -positive -amountLg">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</label>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- Autocomplete Dropdown -->
<div class="sds-input dropdown -autocomplete ">
<input class="sds-input form-control -hasIcon -hasIconRight" type="text" placeholder="Sélectionnez un compte" value="">
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse sds-input__autocompleteToggle sds-input__iconRight" data-toggle="dropdown" data-display="static" data-offset="0,16" data-reference="parent" data-boundary="window" aria-expanded="false">
<span class="sds-icon sds-icon-chevrondown"></span>
</button>
<div class="sds-input__autocomplete">
<form class="dropdown-menu sds-input__autocompleteInner sds-box -insetLg sds-stackMd" action="">
<div class="h3">Comptes de la société</div>
<div class="sds-stackSm">
<div class="h4">Comptes et cartes</div>
<div class="sds-accountSelector__dropdownSection sds-stackSm">
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id="" checked><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-amount -positive -amountLg">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</label>
</div>
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-amount -positive -amountLg">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</label>
</div>
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-badge badge -badgePrimary -badgeTonal">
non visible
</div>
</label>
</div>
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-badge badge -badgePrimary -badgeTonal">
non visible
</div>
</label>
</div>
</div>
</div>
<div class="sds-stackSm">
<div class="h4">Epargne</div>
<div class="sds-accountSelector__dropdownSection sds-stackSm">
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-amount -positive -amountLg">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</label>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- Search -->
<div class="sds-input -search -hasIcon">
<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>
<!-- Search Bg White -->
<div class="sds-input -search -hasIcon -bgWhite">
<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>
<!-- Search Bg White Large -->
<div class="sds-input -search -hasIcon -bgWhite -large -noBorder">
<input id="" class="sds-input form-control" type="text" placeholder="Recherche" 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" 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>
<!-- Search Focused -->
<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>
<!-- Search Focused Value -->
<div class="sds-input -search -hasIcon -isFocused">
<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 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>
<!-- Search Blur Value -->
<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 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>
<!-- Phone -->
<fieldset class="sds-input -phone">
<label for="phone-number" class="sds-label -labelForm">
Numéro
</label>
<div class="sds-input__phoneWrapper">
<div class="sds-input__phonePrefixWrapper">
<label for="phonePrefixSelect" class="sds-label sr-only">
Phone Prefix Selection
</label>
<div class="sds-select sds-input__phoneSelect">
<select id="phonePrefixSelect" class="sds-select form-control">
<option value="opt-0">+352</option>
<option value="opt-1">+33</option>
<option value="opt-2">+32</option>
</select>
<span class="sds-select__arrow sds-icon sds-icon-chevrondown" aria-hidden="true"></span>
</div>
<label for="phonePrefixCustomInput" class="sds-label sr-only">
Phone Prefix Input
</label>
<div class="sds-input__phoneCustomPrefixWrapper">
<span class="sds-input__phoneNumberPrefix">+</span>
<input class="sds-input__phoneCustomPrefix form-control" id="phonePrefixCustomInput" type="tel" placeholder="" value="">
</div>
</div>
<input class="form-control" id="" type="tel" placeholder="Téléphone" value="">
</div>
</fieldset>
<!-- Phone Custom Prefix -->
<fieldset class="sds-input -phone -phoneCustomPrefix">
<label for="phone-number" class="sds-label -labelForm">
Numéro
</label>
<div class="sds-input__phoneWrapper">
<div class="sds-input__phonePrefixWrapper">
<label for="phonePrefixSelectNotShown" class="sds-label sr-only">
Phone Prefix Selection
</label>
<div class="sds-select sds-input__phoneSelect">
<select id="phonePrefixSelectNotShown" class="sds-select form-control">
<option value="opt-0">+352</option>
<option value="opt-1">+33</option>
<option value="opt-2">+32</option>
</select>
<span class="sds-select__arrow sds-icon sds-icon-chevrondown" aria-hidden="true"></span>
</div>
<label for="phonePrefixCustomInputShown" class="sds-label sr-only">
Phone Prefix Input
</label>
<div class="sds-input__phoneCustomPrefixWrapper">
<span class="sds-input__phoneNumberPrefix">+</span>
<input class="sds-input__phoneCustomPrefix form-control" id="phonePrefixCustomInputShown" type="tel" placeholder="" value="">
</div>
</div>
<input class="form-control" id="" type="tel" placeholder="Téléphone" value="">
</div>
</fieldset>
<!-- Phone Error -->
<fieldset class="sds-input -phone is-invalid">
<label for="phone-number" class="sds-label -labelForm">
Numéro
</label>
<div class="sds-input__phoneWrapper">
<div class="sds-input__phonePrefixWrapper">
<label for="phonePrefixSelectError" class="sds-label sr-only">
Phone Prefix Selection
</label>
<div class="sds-select sds-input__phoneSelect">
<select id="phonePrefixSelectError" class="sds-select form-control">
<option value="opt-0">+352</option>
<option value="opt-1">+33</option>
<option value="opt-2">+32</option>
</select>
<span class="sds-select__arrow sds-icon sds-icon-chevrondown" aria-hidden="true"></span>
</div>
<label for="phonePrefixCustomInputError" class="sds-label sr-only">
Phone Prefix Input
</label>
<div class="sds-input__phoneCustomPrefixWrapper">
<span class="sds-input__phoneNumberPrefix">+</span>
<input class="sds-input__phoneCustomPrefix form-control is-invalid" id="phonePrefixCustomInputError" type="tel" placeholder="" value="">
</div>
</div>
<input class="form-control is-invalid" id="" type="tel" placeholder="Téléphone" value="">
</div>
<div class="invalid-feedback">Error in entered value</div>
</fieldset>
<!-- Btn -->
<button type="button" class="sds-select">
<span class="form-control">
Energy class
</span>
<span class="sds-select__arrow sds-icon sds-icon-chevrondown" aria-hidden="true"></span>
</button>
<!-- Default -->
<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>
<!-- Shadow -->
<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>
<!-- Shadow Icon -->
<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>
<!-- Shadow Large -->
<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>
<!-- Shadow Xl -->
<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>
<!-- Shadow 2 Xl -->
<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>
<!-- Calendar -->
<div class="{{ namespace }}input{% for mod in parentModifiers %} {{ mod }}{% endfor %}{% for mod in parentClasses %} {{ mod }}{% endfor %}">
<input class="{{ namespace }}input form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" type="text" placeholder="{{ placeholder }}" value="{{ value }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
{% if icon %}
<div class="{{ namespace }}input__iconRight">
<span class="{{ namespace }}icon {{ namespace }}{{ icon }}"></span>
</div>
{% endif %}
{% if error %}
<div class="invalid-feedback">{{ feedback }}</div>
{% endif %}
</div>
<!-- Calendar Small -->
<div class="{{ namespace }}input{% for mod in parentModifiers %} {{ mod }}{% endfor %}{% for mod in parentClasses %} {{ mod }}{% endfor %}">
<input class="{{ namespace }}input form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" type="text" placeholder="{{ placeholder }}" value="{{ value }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
{% if icon %}
<div class="{{ namespace }}input__iconRight">
<span class="{{ namespace }}icon {{ namespace }}{{ icon }}"></span>
</div>
{% endif %}
{% if error %}
<div class="invalid-feedback">{{ feedback }}</div>
{% endif %}
</div>
<!-- Calendar Inline -->
<div class="{{ namespace }}input{% for mod in parentModifiers %} {{ mod }}{% endfor %}{% for mod in parentClasses %} {{ mod }}{% endfor %}">
<input class="{{ namespace }}input form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" type="text" placeholder="{{ placeholder }}" value="{{ value }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
{% if icon %}
<div class="{{ namespace }}input__iconRight">
<span class="{{ namespace }}icon {{ namespace }}{{ icon }}"></span>
</div>
{% endif %}
{% if error %}
<div class="invalid-feedback">{{ feedback }}</div>
{% endif %}
</div>
<!-- Disabled -->
<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>
<!-- Disabled Icon -->
<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>
<!-- Readonly -->
<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>
<!-- Icon Right -->
<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>
<!-- Error -->
<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>
<!-- Hint -->
<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>
<!-- Multiple -->
<div class="{{ namespace }}input -multiple">
<input class="{{ namespace }}input__field form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" type="text" placeholder="{{ placeholder }}" value="{{ value }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
<input class="{{ namespace }}input__field form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" type="text" placeholder="" value="{{ value2 }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
<input class="{{ namespace }}input__field form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" type="text" placeholder="" value="{{ value3 }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
<input class="{{ namespace }}input__field form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" type="text" placeholder="" value="{{ value4 }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
{% if error %}
<div class="invalid-feedback">{{ feedback }}</div>
{% endif %}
{% if message %}
{% render '@message' %}
{% endif %}
</div>
<!-- Multiple Disabled -->
<div class="{{ namespace }}input -multiple">
<input class="{{ namespace }}input form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" type="text" placeholder="{{ placeholder }}" value="{{ value }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
<input class="{{ namespace }}input form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" type="text" placeholder="" value="{{ value }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
<input class="{{ namespace }}input form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" type="text" placeholder="" value="{{ value }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
{% if error %}
<div class="invalid-feedback">{{ feedback }}</div>
{% endif %}
{% if message %}
{% render '@message' %}
{% endif %}
</div>
<!-- Autocomplete -->
<div class="{{ namespace }}input -autocomplete">
<input class="{{ namespace }}input form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" type="text" placeholder="{{ placeholder }}" value="{{ value }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
{% if error %}
<div class="invalid-feedback">{{ feedback }}</div>
{% endif %}
{% if message %}
{% render '@message' %}
{% endif %}
<div class="{{ namespace }}input__autocomplete">
<form class="{{ namespace }}input__autocompleteInner {{ namespace }}box -insetLg {{ namespace }}stackMd" action="">
<div class="h3">Comptes de la société</div>
<div class="{{ namespace }}stackSm">
<div class="h4">Comptes et cartes</div>
<div class="{{ namespace }}accountSelector__dropdownSection {{ namespace }}stackSm">
{% render "@snet-account-card",{checkedOptions: true},true %}
{% render "@snet-account-card" %}
{% render "@snet-account-card" %}
{% render "@snet-account-card--amount-hidden" %}
{% render "@snet-account-card--amount-hidden" %}
</div>
</div>
<div class="{{ namespace }}stackSm">
<div class="h4">Epargne</div>
<div class="{{ namespace }}accountSelector__dropdownSection {{ namespace }}stackSm">
{% render "@snet-account-card" %}
</div>
</div>
</form>
</div>
</div>
<!-- Autocomplete Selected -->
<div class="{{ namespace }}input -autocomplete">
<input class="{{ namespace }}input form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" type="text" placeholder="{{ placeholder }}" value="{{ value }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
{% if error %}
<div class="invalid-feedback">{{ feedback }}</div>
{% endif %}
{% if message %}
{% render '@message' %}
{% endif %}
<div class="{{ namespace }}input__autocomplete">
<div class="{{ namespace }}input__autocompleteSelected">
{% if beneficiary %}
{% render "@snet-dismissible-account-card--beneficiary",dismissibleCardOptions,true %}
{% elseif amountVisible %}
{% render "@snet-dismissible-account-card--amount-visible",dismissibleCardOptions,true %}
{% else %}
{% render "@snet-dismissible-account-card",dismissibleCardOptions,true %}
{% endif %}
</div>
<form class="{{ namespace }}input__autocompleteInner {{ namespace }}box -insetLg {{ namespace }}stackMd" action="">
<div class="h3">Comptes de la société</div>
<div class="{{ namespace }}stackSm">
<div class="h4">Comptes et cartes</div>
<div class="{{ namespace }}accountSelector__dropdownSection {{ namespace }}stackSm">
{% render "@snet-account-card",{checkedOptions: true},true %}
{% render "@snet-account-card" %}
{% render "@snet-account-card--amount-hidden" %}
{% render "@snet-account-card--amount-hidden" %}
</div>
</div>
<div class="{{ namespace }}stackSm">
<div class="h4">Epargne</div>
<div class="{{ namespace }}accountSelector__dropdownSection {{ namespace }}stackSm">
{% render "@snet-account-card" %}
</div>
</div>
</form>
</div>
</div>
<!-- Autocomplete Dropdown -->
<div class="{{ namespace }}input dropdown -autocomplete {% for mod in parentModifiers %} {{ mod }}{% endfor %}{% for mod in parentClasses %} {{ mod }}{% endfor %}">
<input class="{{ namespace }}input form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" type="text" placeholder="{{ placeholder }}" value="{{ value }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
{% render "@icon-btn-secondary-inverse",{
icon: "icon-chevrondown",
classes: [namespace+"input__autocompleteToggle",namespace+"input__iconRight"],
attrs: {
"data-toggle": "dropdown",
"data-display": "static",
"data-offset": "0,16",
"data-reference": "parent",
"data-boundary": "window",
"aria-expanded": "false"
}
},true %}
{% if error %}
<div class="invalid-feedback">{{ feedback }}</div>
{% endif %}
{% if message %}
{% render '@message' %}
{% endif %}
<div class="{{ namespace }}input__autocomplete">
<form class="dropdown-menu {{ namespace }}input__autocompleteInner {{ namespace }}box -insetLg {{ namespace }}stackMd" action="">
<div class="h3">Comptes de la société</div>
<div class="{{ namespace }}stackSm">
<div class="h4">Comptes et cartes</div>
<div class="{{ namespace }}accountSelector__dropdownSection {{ namespace }}stackSm">
{% render "@snet-account-card",{checkedOptions: true},true %}
{% render "@snet-account-card" %}
{% render "@snet-account-card--amount-hidden" %}
{% render "@snet-account-card--amount-hidden" %}
</div>
</div>
<div class="{{ namespace }}stackSm">
<div class="h4">Epargne</div>
<div class="{{ namespace }}accountSelector__dropdownSection {{ namespace }}stackSm">
{% render "@snet-account-card" %}
</div>
</div>
</form>
</div>
</div>
<!-- Search -->
<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>
<!-- Search Bg White -->
<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>
<!-- Search Bg White Large -->
<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>
<!-- Search Focused -->
<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>
<!-- Search Focused Value -->
<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>
<!-- Search Blur Value -->
<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>
<!-- Phone -->
<fieldset class="{{ namespace }}input{% for mod in parentModifiers %} {{ mod }}{% endfor %}{% for mod in parentClasses %} {{ mod }}{% endfor %}">
{% render "@label--form",{labelFor: "phone-number", text: labelText or "Numéro", modifiers: labelModifiers,classes: labelClasses},true %}
<div class="{{ namespace }}input__phoneWrapper">
<div class="{{ namespace }}input__phonePrefixWrapper">
{% render "@label",{classes: ["sr-only"], labelFor: selectLabel, text: "Phone Prefix Selection"},true %}
{% render "@select",inputSelectOptions,true %}
{% render "@label",{classes: ["sr-only"], labelFor: customPrefixInputLabel, text: "Phone Prefix Input"},true %}
<div class="{{ namespace }}input__phoneCustomPrefixWrapper">
<span class="{{ namespace }}input__phoneNumberPrefix">+</span>
<input class="{{ namespace }}input__phoneCustomPrefix form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" id="{{ customPrefixInputLabel }}" type="{{ type }}" placeholder="" value="{{ value }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
</div>
</div>
<input class="form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" id="{{ labelFor }}" type="{{ type }}" placeholder="{{ placeholder }}" value="{{ value }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
</div>
{% if error %}
<div class="invalid-feedback">{{ feedback }}</div>
{% endif %}
</fieldset>
<!-- Phone Custom Prefix -->
<fieldset class="{{ namespace }}input{% for mod in parentModifiers %} {{ mod }}{% endfor %}{% for mod in parentClasses %} {{ mod }}{% endfor %}">
{% render "@label--form",{labelFor: "phone-number", text: "Numéro", labelClasses: labelClasses},true %}
<div class="{{ namespace }}input__phoneWrapper">
<div class="{{ namespace }}input__phonePrefixWrapper">
{% render "@label",{classes: ["sr-only"], labelFor: selectLabel, text: "Phone Prefix Selection"},true %}
{% render "@select",inputSelectOptions,true %}
{% render "@label",{classes: ["sr-only"], labelFor: customPrefixInputLabel, text: "Phone Prefix Input"},true %}
<div class="{{ namespace }}input__phoneCustomPrefixWrapper">
<span class="{{ namespace }}input__phoneNumberPrefix">+</span>
<input class="{{ namespace }}input__phoneCustomPrefix form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" id="{{ customPrefixInputLabel }}" type="{{ type }}" placeholder="" value="{{ value }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
</div>
</div>
<input class="form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" id="{{ labelFor }}" type="{{ type }}" placeholder="{{ placeholder }}" value="{{ value }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
</div>
{% if error %}
<div class="invalid-feedback">{{ feedback }}</div>
{% endif %}
</fieldset>
<!-- Phone Error -->
<fieldset class="{{ namespace }}input{% for mod in parentModifiers %} {{ mod }}{% endfor %}{% for mod in parentClasses %} {{ mod }}{% endfor %}">
{% render "@label--form",{labelFor: "phone-number", text: "Numéro", labelClasses: labelClasses},true %}
<div class="{{ namespace }}input__phoneWrapper">
<div class="{{ namespace }}input__phonePrefixWrapper">
{% render "@label",{classes: ["sr-only"], labelFor: selectLabel, text: "Phone Prefix Selection"},true %}
{% render "@select",inputSelectOptions,true %}
{% render "@label",{classes: ["sr-only"], labelFor: customPrefixInputLabel, text: "Phone Prefix Input"},true %}
<div class="{{ namespace }}input__phoneCustomPrefixWrapper">
<span class="{{ namespace }}input__phoneNumberPrefix">+</span>
<input class="{{ namespace }}input__phoneCustomPrefix form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" id="{{ customPrefixInputLabel }}" type="{{ type }}" placeholder="" value="{{ value }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
</div>
</div>
<input class="form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" id="{{ labelFor }}" type="{{ type }}" placeholder="{{ placeholder }}" value="{{ value }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}>
</div>
{% if error %}
<div class="invalid-feedback">{{ feedback }}</div>
{% endif %}
</fieldset>
<!-- Btn -->
<button type="button" class="{{ namespace }}select{% for mod in parentModifiers %} {{ mod }}{% endfor %}{% for mod in parentClasses %} {{ mod }}{% endfor %}"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
<span class="form-control">
{{ text }}
</span>
<span class="{{ namespace }}select__arrow {{ namespace }}icon {{ namespace }}icon-chevrondown" aria-hidden="true"></span>
</button>
{% if error %}
<div class="invalid-feedback">{{ feedback }}</div>
{% endif %}
{% if message %}
{% render '@message' %}
{% endif %}
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;
/* 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($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 {
}
}