<div style="background-color: lightgray; height: 100px;">
<div class="stock is-horizontal-small">
<button type="button" class="stock__toggle--stock-plus">
+187
</button>
<div class="stock__toggle--stock-plus-content" data-info-tooltip-content-html="">
<div class="stock__toggle--stock-plus-title"><strong>42</strong> Stück beim Lieferanten bestellt.</div>
<div class="stock__toggle--stock-plus-table">
<div class="responsive-table -spacing-medium -not-responsive">
<div class="responsive-table__container--auto-scrollbar">
<table class="responsive-table__table" data-responsive-table-filter-context>
<colgroup>
<col style="">
<col style="">
<col style="">
</colgroup>
<thead>
<tr class="responsive-table__tr">
<th class="responsive-table__th">
Datum
</th>
<th class="responsive-table__th is-right-aligned">
Menge
</th>
<th class="responsive-table__th is-left-aligned">
Bestätigt
</th>
</tr>
</thead>
<tbody>
<tr class="responsive-table__tr">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Datum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>12.01.2021</p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-right-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Menge</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p><strong>10</strong></p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-left-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Bestätigt</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Ja</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Datum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>17.06.2021</p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-right-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Menge</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p><strong>20</strong></p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-left-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Bestätigt</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Ja</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Datum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>02.05.2021</p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-right-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Menge</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p><strong>5</strong></p>
</div>
</div>
</div>
</div>
</td>
<td class="responsive-table__td is-left-aligned">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Bestätigt</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Nein</p>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
<td class="responsive-table__td" colspan="3">
<div class="wysiwyg-content">
<p class="responsive-table__no-match">Keine Ergebnisse gefunden</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar ab Juli 2020">
<span class="visually-hidden">Verfügbar ab Juli 2020</span>
</button>
</div>
</div>
{% include '@SharedComponents/modules/shared-product/components/stock/stock.twig' %}
{
"demo": true,
"status": "available",
"tooltip": "Verfügbar ab Juli 2020",
"stockPlus": {
"content": "<strong>42</strong> Stück beim Lieferanten bestellt.",
"align": "horizontal",
"size": "small",
"stockQuantity": "+187",
"tableContent": {
"noMatchMessage": "Keine Ergebnisse gefunden",
"spacingVariant": "medium",
"notResponsive": true,
"columnDefs": [
{
"label": "Datum",
"name": "date"
},
{
"label": "Menge",
"name": "amount",
"thClass": "is-right-aligned"
},
{
"label": "Bestätigt",
"name": "confirmed",
"thClass": "is-left-aligned"
}
],
"rowData": [
{
"date": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>12.01.2021</p>"
}
},
"amount": {
"tdClass": "is-right-aligned",
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p><strong>10</strong></p>"
}
},
"confirmed": {
"tdClass": "is-left-aligned",
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Ja</p>"
}
}
},
{
"date": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>17.06.2021</p>"
}
},
"amount": {
"tdClass": "is-right-aligned",
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p><strong>20</strong></p>"
}
},
"confirmed": {
"tdClass": "is-left-aligned",
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Ja</p>"
}
}
},
{
"date": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>02.05.2021</p>"
}
},
"amount": {
"tdClass": "is-right-aligned",
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p><strong>5</strong></p>"
}
},
"confirmed": {
"tdClass": "is-left-aligned",
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Nein</p>"
}
}
}
]
}
}
}
import './stock.scss';
import Stock, {selector as sel} from 'cando-cx-components-library/components/modules/shared-product/components/stock/stock';
export default Stock;
export const selector = sel;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared-product/components/stock/stock";
used on plp tiles, has a white bubble