<script type="text/html" class="modal__placeholder" id="test-modal-placeholder">
<aside class="modal modal--slide" id="test-modal" aria-hidden="true" data-modal>
<div class="modal__overlay" tabindex="-1" data-modal-close data-modal-overlay>
<div class="modal__container--small" role="dialog" aria-modal="true" aria-labelledby="test-modal-title">
<div class="modal__container-inner">
<header class="modal__header">
<h3 class="modal__title" id="test-modal-title">CSV Datei importieren</h3>
<div class="modal__close">
<button class="button-icon--icon-regular -icon-close" type="button" name="close" value="close" data-modal-close="">
<span class="visually-hidden">Close modal</span>
</button>
</div>
</header>
<main class="modal__content" id="test-modal-content">
<div class="file-upload--light">
<input type="file" class="file-upload__file-input" accept=".csv">
<div class="file-upload__drop-box state-initial">
<div class="file-upload__drop-box-prompt">
<span class="file-upload__drop-box-prompt-icon"></span>
<span class="file-upload__drop-box-prompt-text">Datei hier ablegen oder</span>
<span class="file-upload__browse-files-link"> <a href="#" class="button-icon--text-regular" data-file-upload-link="true">
auswählen
</a>
</span>
</div>
</div>
</div>
</main>
<div class="modal__buttons">
<div class="modal__button--confirm">
<button class="button--primary-small" type="submit">Hochladen</button>
</div>
<div class="modal__button--cancel">
<button class="button--tertiary-light-small" type="submit">Abbrechen</button>
</div>
</div>
</div>
</div>
</div>
</aside>
</script>
<div class="modal__demo-toggle" data-modal-id="test-modal">
<button class="button-icon--icon-text-regular -icon-import" type="button" name="add" value="true">
CSV Importieren
</button>
</div>
{% include '@SharedComponents/modules/shared/components/modal/modal.twig' %}
{
"id": "test-modal",
"title": "CSV Datei importieren",
"footer": null,
"closeLabel": "Close modal",
"headingLevel": "3",
"demo": true,
"size": "small",
"cancelButton": {
"variant": "tertiary-light-small",
"type": "button",
"title": "Abbrechen"
},
"confirmButton": {
"variant": "primary-small",
"type": "button",
"title": "Hochladen"
},
"buttonIcon": {
"variant": "icon-text-regular",
"title": "CSV Importieren",
"icon": "import",
"type": "button",
"role": "button",
"name": "add",
"value": "true"
},
"fileUploadData": {
"variant": "light",
"accept": ".csv",
"uploadingInProgressText": "Laden...",
"uploadingSuccessText": "Hochgeladen",
"uploadingFailedText": "Fehlgeschlagen",
"uploadingState": "initial",
"dragHereText": "Datei hier ablegen oder",
"browseFileButton": {
"variant": "text-regular",
"title": "auswählen",
"icon": "",
"type": "a",
"href": "#",
"attributes": {
"data-file-upload-link": true
}
}
}
}
import ModalDemo, {selector as sel} from 'cando-cx-components-library/components/modules/shared/components/modal/modal-demo';
export default ModalDemo;
export const selector = sel;
import ModalMediator, {name as title} from 'cando-cx-components-library/components/modules/shared/components/modal/modal-mediator';
export default ModalMediator;
export const name = title;
import './modal.scss';
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared/components/modal/modal";
No notes defined.