zwischenstand
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
|
||||
<div class="container">
|
||||
{#each block.columns || [] as column}
|
||||
<ColumnsColumn column="{column}" />
|
||||
<ColumnsColumn column={column} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -12,27 +12,27 @@
|
||||
</script>
|
||||
|
||||
<section
|
||||
class:imageMobileBackground="{column.imageMobileBackground}"
|
||||
class="{column.colWidth > 0 ? 'col-md-' + column.colWidth + ' col-12' : 'col-md-auto col-12'}"
|
||||
class:align-self-start="{column.verticalAlign == 'top'}"
|
||||
class:align-self-center="{column.verticalAlign == 'middle'}"
|
||||
class:align-self-end="{column.verticalAlign == 'bottom'}"
|
||||
class:imageMobileBackground={column.imageMobileBackground}
|
||||
class={column.colWidth > 0 ? 'col-md-' + column.colWidth + ' col-12' : 'col-md-auto col-12'}
|
||||
class:align-self-start={column.verticalAlign == 'top'}
|
||||
class:align-self-center={column.verticalAlign == 'middle'}
|
||||
class:align-self-end={column.verticalAlign == 'bottom'}
|
||||
>
|
||||
{#if column.type == "text"}
|
||||
<Text column="{column}" />
|
||||
<Text column={column} />
|
||||
{:else if column.type == "image"}
|
||||
<DefaultImage
|
||||
images="{column.images}"
|
||||
imageHoverEffect="{column.imageHoverEffect}"
|
||||
forceFullHeight="{column.forceFullHeight}"
|
||||
images={column.images}
|
||||
imageHoverEffect={column.imageHoverEffect}
|
||||
forceFullHeight={column.forceFullHeight}
|
||||
/>
|
||||
{:else if column.type == "cta"}
|
||||
<Cta column="{column}" />
|
||||
<Cta column={column} />
|
||||
{:else if column.type == "chapterDescription"}
|
||||
<ChapterDescription
|
||||
title="{column.chapterDescription.title}"
|
||||
type="{column.chapterDescription.type}"
|
||||
description="{column.chapterDescription.description}"
|
||||
title={column.chapterDescription.title}
|
||||
type={column.chapterDescription.type}
|
||||
description={column.chapterDescription.description}
|
||||
/>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
@@ -5,14 +5,14 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<CookieSet cookieName="{'googleMaps'}" textPosition="{'unten'}" background="{'rgba(44, 44, 44, 0.4)'}">
|
||||
<CookieSet cookieName={'googleMaps'} textPosition={'unten'} background={'rgba(44, 44, 44, 0.4)'}>
|
||||
<iframe
|
||||
title="Google Maps"
|
||||
use:setHeight
|
||||
id="iframe"
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2512.077224708092!2d11.023318016007138!3d50.97776317955154!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a4729650047377%3A0xca0e03f621729448!2sWebmakers%20GmbH!5e0!3m2!1sde!2sde!4v1571866765252!5m2!1sde!2sde"
|
||||
style="border:0;"
|
||||
allowfullscreen="{true}"
|
||||
allowfullscreen={true}
|
||||
loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</CookieSet>
|
||||
|
||||
@@ -10,16 +10,16 @@
|
||||
<div class="placeholder"></div>
|
||||
<div class="left">
|
||||
<Cta
|
||||
column="{{
|
||||
column={{
|
||||
type: 'cta',
|
||||
cta: hp.cta,
|
||||
}}"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div class="hp-media">
|
||||
<MedialibImage
|
||||
id="{hp.image}"
|
||||
filter="{typeof window !== 'undefined' && window.innerWidth > 500 ? 'xl' : 'm'}"
|
||||
id={hp.image}
|
||||
filter={typeof window !== 'undefined' && window.innerWidth > 500 ? 'xl' : 'm'}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<section class="improveYourselfDescription">
|
||||
<div class="img">
|
||||
<MedialibImage
|
||||
id="{des.image}"
|
||||
id={des.image}
|
||||
filter="xxl"
|
||||
/>
|
||||
<div class="shadow"></div>
|
||||
|
||||
@@ -13,11 +13,11 @@
|
||||
const mobile = innerWidth < 600
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth="{innerWidth}" />
|
||||
<svelte:window bind:innerWidth={innerWidth} />
|
||||
<section class="newsletter">
|
||||
<div
|
||||
class="background-image"
|
||||
class:mobile="{mobile}"
|
||||
class:mobile={mobile}
|
||||
>
|
||||
{#if mobile}
|
||||
<img
|
||||
@@ -102,25 +102,25 @@
|
||||
{:else}
|
||||
<p>Wir informieren Dich über die neuesten Styles, wenn Du es willst!</p>
|
||||
<form
|
||||
on:submit|preventDefault|stopPropagation="{() => {
|
||||
on:submit|preventDefault|stopPropagation={() => {
|
||||
submitNewsletter(email, dataProt).then(() => (emailIsSubscribed = true))
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="E-Mail"
|
||||
bind:value="{email}"
|
||||
bind:value={email}
|
||||
id="email"
|
||||
class="specialInputStyle"
|
||||
on:focus="{(e) => {}}"
|
||||
on:focus={(e) => {}}
|
||||
/>
|
||||
<div class="data-protection">
|
||||
<Input
|
||||
type="checkbox"
|
||||
bind:value="{dataProt}"
|
||||
bind:value={dataProt}
|
||||
id="dataprot"
|
||||
classList="specialCheckStyle"
|
||||
onChange="{onChange}"
|
||||
onChange={onChange}
|
||||
/>
|
||||
<p>
|
||||
<a
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
{#if block.predefinedBlock?.id}
|
||||
<Content
|
||||
id="{block.predefinedBlock.id}"
|
||||
id={block.predefinedBlock.id}
|
||||
allwaysInView
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -56,31 +56,31 @@
|
||||
|
||||
<section
|
||||
class="splittedHomepage"
|
||||
style="--color: {currentColor}"
|
||||
style="--color: {currentColor}
|
||||
>
|
||||
<div class="placeholder"></div>
|
||||
<ul class="elements">
|
||||
{#each selfImprovementChapters as chapter, i}
|
||||
<li
|
||||
class:selected="{i == selectedChapter}"
|
||||
on:mouseenter="{() => {
|
||||
class:selected={i == selectedChapter}
|
||||
on:mouseenter={() => {
|
||||
stopInterval()
|
||||
selectedChapter = i
|
||||
updateShadowColor(chapter.color)
|
||||
}}"
|
||||
on:mouseleave="{startInterval}"
|
||||
}}
|
||||
on:mouseleave={startInterval}
|
||||
>
|
||||
{#if i == selectedChapter}
|
||||
<h2
|
||||
class="{i % 2 ? '' : 'transparent-heading'}"
|
||||
style="{i % 2
|
||||
class={i % 2 ? '' : 'transparent-heading'}
|
||||
style={i % 2
|
||||
? `color: var(${getVariableNameForChapter(chapter.type)})`
|
||||
: `-webkit-text-stroke: 1px var(${getVariableNameForChapter(chapter.type)})`}"
|
||||
: `-webkit-text-stroke: 1px var(${getVariableNameForChapter(chapter.type)})`}
|
||||
>
|
||||
{chapter.title}
|
||||
</h2>
|
||||
{:else}
|
||||
<h2 class="{i % 2 ? 'white-heading' : 'transparent-heading'}">{chapter.alias}</h2>
|
||||
<h2 class={i % 2 ? 'white-heading' : 'transparent-heading'}>{chapter.alias}</h2>
|
||||
{/if}
|
||||
|
||||
<p style="color: var({getVariableNameForChapter(chapter.type)} !important;">
|
||||
@@ -107,7 +107,7 @@
|
||||
dx="-10"
|
||||
dy="0"
|
||||
stdDeviation="20"
|
||||
flood-color="{currentColor}"></feDropShadow>
|
||||
flood-color={currentColor}></feDropShadow>
|
||||
</filter>
|
||||
</defs>
|
||||
<path
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
<li>
|
||||
<div class="image-wrapper">
|
||||
<MedialibImage id="{item.image}" />
|
||||
<MedialibImage id={item.image} />
|
||||
<h3>
|
||||
{i + 1}
|
||||
</h3>
|
||||
@@ -25,9 +25,9 @@
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="{isMobile ? 58 : 72}"
|
||||
height="{isMobile ? 58 : 72}"
|
||||
viewBox="0 0 {isMobile ? 58 : 72} {isMobile ? 58 : 72}"
|
||||
width={isMobile ? 58 : 72}
|
||||
height={isMobile ? 58 : 72}
|
||||
viewBox="0 0 {isMobile ? 58 : 72} {isMobile ? 58 : 72}
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
$: isMobile = innerWidth < 968
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth="{innerWidth}" />
|
||||
<svelte:window bind:innerWidth={innerWidth} />
|
||||
|
||||
{#if block.steps?.horizontal}
|
||||
<div
|
||||
@@ -28,9 +28,9 @@
|
||||
<ul class="step-blocks horizontal">
|
||||
{#each block.steps.items as item, i}
|
||||
<Step
|
||||
item="{item}"
|
||||
i="{i}"
|
||||
isMobile="{isMobile}"
|
||||
item={item}
|
||||
i={i}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
{/each}
|
||||
</ul>
|
||||
@@ -39,9 +39,9 @@
|
||||
<ul class="step-blocks">
|
||||
{#each block.steps.items as item, i}
|
||||
<Step
|
||||
item="{item}"
|
||||
i="{i}"
|
||||
isMobile="{isMobile}"
|
||||
item={item}
|
||||
i={i}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<p>{cta.description}</p>
|
||||
<div class="buttons">
|
||||
{#each cta.callToActionButtons as button}
|
||||
<Button button="{button}" />
|
||||
<Button button={button} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,6 +8,6 @@
|
||||
{#if column.links?.length}
|
||||
<div class="button-wrap gap-m">
|
||||
<!-- Buttons sitzen im Wrapper, sollten vermutlich auch flexibel / repeatable sein, mal nur einen, mal zwei, mal keiner -->
|
||||
<LinkList links="{column.links}" />
|
||||
<LinkList links={column.links} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
options: {
|
||||
minSpace: number
|
||||
offsetAbove: number
|
||||
} = { minSpace: 150, offsetAbove: 75 }
|
||||
} ={ minSpace: 150, offsetAbove: 75 }
|
||||
): {
|
||||
x: string
|
||||
y: string
|
||||
@@ -72,7 +72,7 @@
|
||||
function dateChangeListener(e: any) {
|
||||
dateValue = new Date(e.detail.date)
|
||||
// element has data-for="error-message-birthday" attribute, get it by that
|
||||
const el = document.querySelector(`[data-for="error-message-${id}"]`)
|
||||
const el = document.querySelector(`[data-for="error-message-${id}]`)
|
||||
if (el) {
|
||||
el.remove()
|
||||
}
|
||||
@@ -104,18 +104,18 @@
|
||||
</script>
|
||||
|
||||
<label
|
||||
bind:this="{wrapper}"
|
||||
id="{id}"
|
||||
bind:this={wrapper}
|
||||
id={id}
|
||||
class="custom-date-picker"
|
||||
>
|
||||
<span class:hasValue="{!!dateValue || !editMode}">{placeholder}</span>
|
||||
<span class:hasValue={!!dateValue || !editMode}>{placeholder}</span>
|
||||
{#if editMode}
|
||||
<div class="wrapper">
|
||||
{#if dateValue}
|
||||
<button
|
||||
data-cy="custom-date-picker-text"
|
||||
class="btn text transparent"
|
||||
on:click|preventDefault|stopPropagation="{showDatepicker}"
|
||||
on:click|preventDefault|stopPropagation={showDatepicker}
|
||||
>
|
||||
{new Date(dateValue).toLocaleDateString("de-DE")}
|
||||
</button>
|
||||
@@ -127,21 +127,21 @@
|
||||
data-cy="custom-date-picker-icon"
|
||||
aria-label="Toggle datepicker"
|
||||
class="btn transparent icon"
|
||||
on:click|preventDefault|stopPropagation="{() => {
|
||||
on:click|preventDefault|stopPropagation={() => {
|
||||
hideAllModals()
|
||||
if (dateValue) dateValue = null
|
||||
else showDatepicker()
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
{#if !dateValue}
|
||||
<Icon
|
||||
path="{mdiCalendarAccount}"
|
||||
path={mdiCalendarAccount}
|
||||
width="24px"
|
||||
height="24px"
|
||||
/>
|
||||
{:else}
|
||||
<Icon
|
||||
path="{mdiCalendarRemove}"
|
||||
path={mdiCalendarRemove}
|
||||
width="24px"
|
||||
height="24px"
|
||||
/>
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
if (!supportedMimeTypes.includes(file.type)) {
|
||||
newNotification({
|
||||
class: "error",
|
||||
html: `Der Dateityp - "${file.type}" wird nicht unterstützt. Bitte wähle eine unterstützte Datei aus. ${supportedFormats}`,
|
||||
html: `Der Dateityp - "${file.type} wird nicht unterstützt. Bitte wähle eine unterstützte Datei aus. ${supportedFormats}`,
|
||||
})
|
||||
return
|
||||
}
|
||||
@@ -71,7 +71,7 @@
|
||||
if (!isSupported) {
|
||||
newNotification({
|
||||
class: "error",
|
||||
html: `Der Dateityp "${file.type}" wird nicht unterstützt. Bitte wähle eine unterstützte Datei aus. ${supportedFormats}`,
|
||||
html: `Der Dateityp "${file.type} wird nicht unterstützt. Bitte wähle eine unterstützte Datei aus. ${supportedFormats}`,
|
||||
})
|
||||
return
|
||||
}
|
||||
@@ -86,7 +86,7 @@
|
||||
reader.addEventListener("load", function () {
|
||||
imgIsData = true
|
||||
const objectURL = URL.createObjectURL(file)
|
||||
value = {
|
||||
value ={
|
||||
path: file.name,
|
||||
type: file.type,
|
||||
size: file.size,
|
||||
@@ -107,98 +107,98 @@
|
||||
|
||||
<label class="file file-input-label">
|
||||
<div class="headline">
|
||||
<span class:hasValue="{true}">
|
||||
<span class:hasValue={true}>
|
||||
{placeholder}
|
||||
|
||||
{#if helperText}
|
||||
<div
|
||||
use:tooltip="{{
|
||||
use:tooltip={{
|
||||
content: helperText,
|
||||
}}"
|
||||
}}
|
||||
class="helperText"
|
||||
>
|
||||
<Icon path="{mdiInformationOutline}" />
|
||||
<Icon path={mdiInformationOutline} />
|
||||
</div>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<Icon
|
||||
path="{type == 'image' ? mdiCameraOutline : mdiMovieOpenOutline}"
|
||||
path={type == 'image' ? mdiCameraOutline : mdiMovieOpenOutline}
|
||||
size="24px"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="file-input"
|
||||
class:focused="{focused}"
|
||||
class:highlight-container="{highlight}"
|
||||
class:focused={focused}
|
||||
class:highlight-container={highlight}
|
||||
role="button"
|
||||
aria-label="File upload"
|
||||
tabindex="{0}"
|
||||
on:dragenter|preventDefault="{() => {
|
||||
tabindex={0}
|
||||
on:dragenter|preventDefault={() => {
|
||||
highlight = true
|
||||
}}"
|
||||
on:dragover|preventDefault="{() => {
|
||||
}}
|
||||
on:dragover|preventDefault={() => {
|
||||
highlight = true
|
||||
}}"
|
||||
on:dragleave|preventDefault="{() => {
|
||||
}}
|
||||
on:dragleave|preventDefault={() => {
|
||||
highlight = false
|
||||
}}"
|
||||
on:drop|preventDefault="{(e) => {
|
||||
}}
|
||||
on:drop|preventDefault={(e) => {
|
||||
highlight = false
|
||||
fileInput = e.dataTransfer
|
||||
onChange()
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<div class="fileContainer">
|
||||
<input
|
||||
type="file"
|
||||
bind:this="{fileInput}"
|
||||
on:change|stopPropagation="{onChange}"
|
||||
readonly="{disabled}"
|
||||
id="{id}"
|
||||
accept="{type === 'image' ? 'image/*' : 'video/*'}"
|
||||
bind:this={fileInput}
|
||||
on:change|stopPropagation={onChange}
|
||||
readonly={disabled}
|
||||
id={id}
|
||||
accept={type === 'image' ? 'image/*' : 'video/*'}
|
||||
on:click|stopPropagation
|
||||
/>
|
||||
|
||||
<div
|
||||
class="filePreview"
|
||||
class:hasChildElement="{!!value}"
|
||||
class:hasChildElement={!!value}
|
||||
>
|
||||
{#key rerender}
|
||||
{#if value}
|
||||
{#if type == "image"}
|
||||
{#if typeof value === "string"}
|
||||
<MedialibImage
|
||||
id="{value}"
|
||||
id={value}
|
||||
filter="l"
|
||||
/>
|
||||
{:else if imgIsData}
|
||||
<img
|
||||
src="{value.src}"
|
||||
alt="{value.path}"
|
||||
src={value.src}
|
||||
alt={value.path}
|
||||
/>
|
||||
{:else if typeof value.src === "string" && value.src.includes(";base64,")}
|
||||
<img
|
||||
src="{value.src}"
|
||||
alt="{value.path}"
|
||||
src={value.src}
|
||||
alt={value.path}
|
||||
/>
|
||||
{:else if typeof value.src === "string" && !value.src.match(/^https?:\/\//)}
|
||||
<img
|
||||
src="{`${apiBaseURL}${collectionName}/${entryId}/${value.src}`}"
|
||||
alt="{value.path}"
|
||||
src={`${apiBaseURL}${collectionName}/${entryId}/${value.src}`}
|
||||
alt={value.path}
|
||||
/>
|
||||
{/if}
|
||||
{:else if type == "video"}
|
||||
{#if typeof value == "string"}
|
||||
<MedialibFile
|
||||
id="{value}"
|
||||
id={value}
|
||||
let:entry
|
||||
let:src
|
||||
>
|
||||
<video>
|
||||
<track kind="captions" />
|
||||
<source
|
||||
src="{src}#t=0.1"
|
||||
src={src}#t=0.1"
|
||||
type="video/mp4"
|
||||
/>
|
||||
|
||||
@@ -212,7 +212,7 @@
|
||||
>
|
||||
<track kind="captions" />
|
||||
<source
|
||||
src="{value.src}#t=0.1"
|
||||
src={value.src}#t=0.1"
|
||||
type="video/mp4"
|
||||
/>
|
||||
</video>
|
||||
@@ -223,10 +223,10 @@
|
||||
<button
|
||||
aria-label="Datei hochladen"
|
||||
class="delete cta primary"
|
||||
on:click|stopPropagation|preventDefault="{() => {
|
||||
on:click|stopPropagation|preventDefault={() => {
|
||||
// change file by clicking input
|
||||
fileInput.click()
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
Austauschen
|
||||
</button>
|
||||
@@ -234,10 +234,10 @@
|
||||
<button
|
||||
aria-label="Datei löschen"
|
||||
class="delete cta primary"
|
||||
on:click|stopPropagation|preventDefault="{() => {
|
||||
on:click|stopPropagation|preventDefault={() => {
|
||||
value = null
|
||||
dispatch('change')
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
Löschen
|
||||
</button>
|
||||
@@ -251,10 +251,10 @@
|
||||
</label>
|
||||
{#if showApproveModal}
|
||||
<Modal
|
||||
show="{true}"
|
||||
on:close="{() => {
|
||||
show={true}
|
||||
on:close={() => {
|
||||
showApproveModal = false
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<svelte:fragment slot="title">Dateiformat Warnung</svelte:fragment>
|
||||
<p>
|
||||
@@ -268,18 +268,18 @@
|
||||
>
|
||||
<button
|
||||
class="btn cta primary"
|
||||
on:click="{() => {
|
||||
on:click={() => {
|
||||
showApproveModal = false
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
class="btn cta secondary"
|
||||
on:click="{() => {
|
||||
on:click={() => {
|
||||
showApproveModal = false
|
||||
onChange(true)
|
||||
}}">Fortfahren</button
|
||||
}}>Fortfahren</button
|
||||
>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
$: hasValue = Boolean(value)
|
||||
|
||||
const attributes = {
|
||||
const attributes ={
|
||||
id,
|
||||
class: classList,
|
||||
placeholder,
|
||||
@@ -28,65 +28,65 @@
|
||||
|
||||
<label
|
||||
style=""
|
||||
class:textarea="{type == 'textarea'}"
|
||||
class:checkbox="{type == 'checkbox'}"
|
||||
class:textarea={type == 'textarea'}
|
||||
class:checkbox={type == 'checkbox'}
|
||||
>
|
||||
{#if type !== "checkbox"}
|
||||
<span class:hasValue="{hasValue || type === 'noInput'}">{placeholder}</span>
|
||||
<span class:hasValue={hasValue || type === 'noInput'}>{placeholder}</span>
|
||||
{/if}
|
||||
{#if type == "checkbox"}
|
||||
<input
|
||||
type="checkbox"
|
||||
{...attributes}
|
||||
on:change="{onChange}"
|
||||
bind:checked="{value}"
|
||||
on:change={onChange}
|
||||
bind:checked={value}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="checkit-span"
|
||||
aria-label="Toggle checkbox"
|
||||
tabindex="{0}"
|
||||
on:click="{() => {
|
||||
tabindex={0}
|
||||
on:click={() => {
|
||||
value = !value
|
||||
setTimeout(() => {
|
||||
const event = new Event('change', { bubbles: true })
|
||||
document.getElementById(id)?.dispatchEvent(event)
|
||||
}, 10)
|
||||
}}"
|
||||
on:keydown="{(e) => {}}"></button>
|
||||
}}
|
||||
on:keydown={(e) => {}}></button>
|
||||
{/if}
|
||||
{#if type == "password"}
|
||||
<input
|
||||
{...attributes}
|
||||
on:blur="{onChange}"
|
||||
bind:value="{value}"
|
||||
on:change="{onChange}"
|
||||
on:blur={onChange}
|
||||
bind:value={value}
|
||||
on:change={onChange}
|
||||
type="password"
|
||||
class="sentry-mask"
|
||||
/>
|
||||
{/if}
|
||||
{#if type == "text"}
|
||||
<input
|
||||
on:blur="{onChange}"
|
||||
on:blur={onChange}
|
||||
{...attributes}
|
||||
bind:value="{value}"
|
||||
on:change="{onChange}"
|
||||
bind:value={value}
|
||||
on:change={onChange}
|
||||
/>
|
||||
{/if}
|
||||
{#if type == "textarea"}
|
||||
<textarea
|
||||
on:blur="{onChange}"
|
||||
on:blur={onChange}
|
||||
{...attributes}
|
||||
bind:value="{value}"
|
||||
on:change="{onChange}"></textarea>
|
||||
bind:value={value}
|
||||
on:change={onChange}></textarea>
|
||||
{/if}
|
||||
{#if type == "number"}
|
||||
<input
|
||||
on:blur="{onChange}"
|
||||
on:blur={onChange}
|
||||
type="number"
|
||||
{...attributes}
|
||||
bind:value="{value}"
|
||||
on:change="{onChange}"
|
||||
bind:value={value}
|
||||
on:change={onChange}
|
||||
/>
|
||||
{/if}
|
||||
{#if type == "noInput"}
|
||||
@@ -100,14 +100,14 @@
|
||||
{/if}
|
||||
{#if type == "select"}
|
||||
<select
|
||||
on:change="{onChange}"
|
||||
on:change={onChange}
|
||||
{...attributes}
|
||||
bind:value="{value}"
|
||||
bind:value={value}
|
||||
>
|
||||
{#each options as option, index}
|
||||
<option
|
||||
value="{option.value}"
|
||||
selected="{index === selectedOptionIndex}"
|
||||
value={option.value}
|
||||
selected={index === selectedOptionIndex}
|
||||
>
|
||||
{option.name}
|
||||
</option>
|
||||
@@ -119,12 +119,12 @@
|
||||
{/if}
|
||||
{#if helperText}
|
||||
<div
|
||||
use:tooltip="{{
|
||||
use:tooltip={{
|
||||
content: helperText,
|
||||
}}"
|
||||
}}
|
||||
class="helperText"
|
||||
>
|
||||
<Icon path="{mdiInformationOutline}" />
|
||||
<Icon path={mdiInformationOutline} />
|
||||
</div>
|
||||
{/if}
|
||||
</label>
|
||||
|
||||
@@ -19,23 +19,23 @@
|
||||
<label
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:click|stopPropagation="{() => {
|
||||
on:click|stopPropagation={() => {
|
||||
focused = true
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<span class:hasValue="{hasValue || !editMode}">{placeholder}</span>
|
||||
<span class:hasValue={hasValue || !editMode}>{placeholder}</span>
|
||||
{#if editMode}
|
||||
<Select
|
||||
bind:items="{options}"
|
||||
inputAttributes="{{ autocomplete: 'on' }}"
|
||||
placeholder="{placeholder}"
|
||||
showChevron="{true}"
|
||||
bind:focused="{focused}"
|
||||
clearable="{clearable}"
|
||||
hideEmptyState="{true}"
|
||||
searchable="{true}"
|
||||
bind:value="{selectedOption}"
|
||||
on:clear="{() => (selectedOption = null)}"
|
||||
bind:items={options}
|
||||
inputAttributes={{ autocomplete: 'on' }}
|
||||
placeholder={placeholder}
|
||||
showChevron={true}
|
||||
bind:focused={focused}
|
||||
clearable={clearable}
|
||||
hideEmptyState={true}
|
||||
searchable={true}
|
||||
bind:value={selectedOption}
|
||||
on:clear={() => (selectedOption = null)}
|
||||
/>
|
||||
{:else if !editMode}
|
||||
<div class="no-input">{selectedOption?.label || "-"}</div>
|
||||
|
||||
Reference in New Issue
Block a user