@mmlogic/components 0.1.9 → 0.1.11

package/dist/collection/components/mrd-table/mrd-table.scss

@@ -152,6 +152,394 @@
   100% { background-position: -200% 0; }
 }
 
+/* ── Toolbar ───────────────────────────────────────────────────────────── */
+.mrd-table__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: var(--mrd-space-2);
+}
+
+.mrd-table__toolbar-left,
+.mrd-table__toolbar-right {
+  display: flex;
+  gap: var(--mrd-space-2);
+  align-items: center;
+}
+
+.mrd-table__action {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--mrd-border-radius);
+  cursor: pointer;
+  color: var(--mrd-color-neutral-400);
+  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.mrd-table__action:hover {
+  background-color: var(--mrd-color-neutral-100);
+  border-color: var(--mrd-color-neutral-300);
+  color: var(--mrd-color-neutral-700);
+}
+
+.mrd-table__action:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Primary: slightly more prominent than regular at rest; primary fill on hover */
+.mrd-table__action--primary {
+  color: var(--mrd-color-neutral-500);
+}
+
+.mrd-table__action--primary:hover {
+  background: var(--mrd-color-primary);
+  border-color: var(--mrd-color-primary);
+  color: var(--mrd-color-white);
+}
+
+.mrd-table__action--danger {
+  color: var(--mrd-color-error);
+}
+
+.mrd-table__action--danger:hover {
+  background-color: var(--mrd-color-error-light, #fef2f2);
+  border-color: var(--mrd-color-error);
+}
+
+.mrd-table__action-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  pointer-events: none;
+  fill: currentColor;
+}
+
+/* CSS tooltip — appears above the button on hover */
+.mrd-table__action-tooltip {
+  display: none;
+  position: absolute;
+  bottom: calc(100% + 6px);
+  right: 0;
+  padding: var(--mrd-space-1) var(--mrd-space-2);
+  font-size: var(--mrd-font-size-xs);
+  white-space: nowrap;
+  background: var(--mrd-color-tooltip, #fffce1);
+  color: var(--mrd-color-neutral-900);
+  border: 1px solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius-sm, var(--mrd-border-radius));
+  pointer-events: none;
+  z-index: 10;
+}
+
+.mrd-table__action:hover .mrd-table__action-tooltip {
+  display: block;
+}
+
+/* ── Filter toggle active state ────────────────────────────────────────── */
+.mrd-table__filter-toggle--active {
+  background: var(--mrd-color-primary);
+  border-color: var(--mrd-color-primary);
+  color: var(--mrd-color-white);
+}
+
+.mrd-table__filter-toggle--active:hover {
+  background: var(--mrd-color-primary-dark, var(--mrd-color-primary));
+  border-color: var(--mrd-color-primary-dark, var(--mrd-color-primary));
+  color: var(--mrd-color-white);
+}
+
+/* Badge showing count of active filters */
+.mrd-table__filter-badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 3px;
+  background: var(--mrd-color-error, #e53e3e);
+  color: var(--mrd-color-white);
+  border-radius: 9999px;
+  font-size: 0.65rem;
+  font-weight: var(--mrd-font-weight-medium);
+  line-height: 1.25rem;
+  text-align: center;
+  pointer-events: none;
+}
+
+/* ── Header: filtered indicator + filter button ─────────────────────────── */
+.mrd-table__header--filtered {
+  color: var(--mrd-color-primary);
+  border-bottom-color: var(--mrd-color-primary);
+}
+
+.mrd-table__header-filter-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--mrd-space-1);
+  padding: 0 3px;
+  background: transparent;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  color: var(--mrd-color-neutral-500);
+  font-size: 0.8rem;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.mrd-table__header-filter-btn:hover {
+  background: var(--mrd-color-neutral-200);
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-table__header-filter-btn--active {
+  color: var(--mrd-color-primary);
+}
+
+/* ── Filter popup ───────────────────────────────────────────────────────── */
+.mrd-table__filter-popup {
+  position: fixed;
+  width: 280px;
+  background: var(--mrd-color-white);
+  border: 1px solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  box-shadow: var(--mrd-shadow-md, 0 4px 12px rgba(0,0,0,.12));
+  z-index: var(--mrd-z-dropdown, 200);
+  font-size: var(--mrd-font-size-sm);
+}
+
+.mrd-table__filter-popup-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--mrd-space-2) var(--mrd-space-3);
+  border-bottom: 1px solid var(--mrd-border-color);
+}
+
+.mrd-table__filter-popup-title {
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-neutral-800);
+  font-size: var(--mrd-font-size-sm);
+}
+
+.mrd-table__filter-close {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--mrd-color-neutral-500);
+  font-size: 0.9rem;
+  padding: 2px 4px;
+  border-radius: 3px;
+  line-height: 1;
+}
+
+.mrd-table__filter-close:hover {
+  background: var(--mrd-color-neutral-100);
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-table__filter-section {
+  padding: var(--mrd-space-2) var(--mrd-space-3);
+}
+
+.mrd-table__filter-section-label {
+  font-size: var(--mrd-font-size-xs);
+  font-weight: var(--mrd-font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--mrd-color-neutral-500);
+  margin-bottom: var(--mrd-space-2);
+}
+
+.mrd-table__filter-sort-buttons {
+  display: flex;
+  gap: var(--mrd-space-2);
+}
+
+.mrd-table__filter-sort-btn {
+  flex: 1;
+  padding: var(--mrd-space-1) var(--mrd-space-2);
+  background: transparent;
+  border: 1px solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  cursor: pointer;
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-neutral-700);
+}
+
+.mrd-table__filter-sort-btn:hover {
+  background: var(--mrd-color-neutral-100);
+}
+
+.mrd-table__filter-sort-btn--active {
+  background: var(--mrd-color-primary);
+  border-color: var(--mrd-color-primary);
+  color: var(--mrd-color-white);
+}
+
+.mrd-table__filter-divider {
+  height: 1px;
+  background: var(--mrd-border-color);
+  margin: 0;
+}
+
+/* ── Filter editors ─────────────────────────────────────────────────────── */
+.mrd-table__filter-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-2);
+}
+
+.mrd-table__filter-select,
+.mrd-table__filter-input {
+  width: 100%;
+  padding: var(--mrd-space-1) var(--mrd-space-2);
+  border: 1px solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-900);
+  background: var(--mrd-color-white);
+  box-sizing: border-box;
+}
+
+.mrd-table__filter-select:focus,
+.mrd-table__filter-input:focus {
+  outline: none;
+  border-color: var(--mrd-color-primary);
+  box-shadow: 0 0 0 2px rgba(0,0,0,.06);
+}
+
+.mrd-table__filter-range {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-1);
+}
+
+.mrd-table__filter-range .mrd-table__filter-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.mrd-table__filter-range-sep {
+  color: var(--mrd-color-neutral-400);
+  flex-shrink: 0;
+}
+
+/* Radio group */
+.mrd-table__filter-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+}
+
+.mrd-table__filter-radio-group--inline {
+  flex-direction: row;
+  gap: var(--mrd-space-3);
+}
+
+.mrd-table__filter-radio-label {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-1);
+  cursor: pointer;
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-800);
+}
+
+/* List (enum) checkboxes */
+.mrd-table__filter-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+  max-height: 180px;
+  overflow-y: auto;
+}
+
+.mrd-table__filter-list-controls {
+  display: flex;
+  gap: var(--mrd-space-2);
+  margin-bottom: var(--mrd-space-1);
+}
+
+.mrd-table__filter-list-btn {
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-primary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  text-decoration: underline;
+}
+
+.mrd-table__filter-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-1);
+  cursor: pointer;
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-table__filter-no-support {
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-500);
+  margin: 0;
+  font-style: italic;
+}
+
+/* ── Popup footer ───────────────────────────────────────────────────────── */
+.mrd-table__filter-popup-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--mrd-space-2);
+  padding: var(--mrd-space-2) var(--mrd-space-3);
+  border-top: 1px solid var(--mrd-border-color);
+}
+
+.mrd-table__filter-btn {
+  padding: var(--mrd-space-1) var(--mrd-space-3);
+  border-radius: var(--mrd-border-radius);
+  border: 1px solid var(--mrd-border-color);
+  font-size: var(--mrd-font-size-sm);
+  cursor: pointer;
+}
+
+.mrd-table__filter-btn--clear {
+  background: transparent;
+  color: var(--mrd-color-neutral-600);
+}
+
+.mrd-table__filter-btn--clear:hover {
+  background: var(--mrd-color-neutral-100);
+}
+
+.mrd-table__filter-btn--apply {
+  background: var(--mrd-color-primary);
+  border-color: var(--mrd-color-primary);
+  color: var(--mrd-color-white);
+}
+
+.mrd-table__filter-btn--apply:hover {
+  background: var(--mrd-color-primary-dark, var(--mrd-color-primary));
+  border-color: var(--mrd-color-primary-dark, var(--mrd-color-primary));
+}
+
+/* ── Pagination footer ─────────────────────────────────────────────────── */
+.mrd-table__footer {
+  padding: var(--mrd-space-1) var(--mrd-space-2);
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-neutral-500);
+  text-align: right;
+}
+
 /* ── Empty state ───────────────────────────────────────────────────────── */
 .mrd-table__empty {
   padding: var(--mrd-space-4) var(--mrd-space-3);

package/dist/collection/dev/app.js

@@ -6,6 +6,7 @@ let _selectedTenant = null;
 let _selectedType   = null; // { name, pluralName }
 let _relationMeta   = {};   // relatedClass / mostSignificantClass → { name, mostSignificantClass }
 let _tableDataHref  = null; // base href for the current table view (without ?page=)
+let _locale         = navigator.language || 'nl-NL';
 
 /* =====================================================================
    UTILITIES
@@ -192,18 +193,40 @@ function renderTable(columns, totalElements, pageSize, page0Rows, dataHref, defa
   customElements.whenDefined('mrd-table').then(async () => {
     const table = document.getElementById('live-table');
 
+    // Active filters stored here; combined with sort in every mrdLoadPage call
+    let _activeFilters = [];
+
     table.columns       = columns;
-    table.locale        = 'nl-NL';
+    table.locale        = _locale;
     table.pageSize      = pageSize;
     table.tableHeight   = 500;
     table.totalElements = totalElements;
     table.defaultSort   = defaultSort;
+    table.actions       = [
+      { action: 'create', label: 'Nieuw record',          icon: 'dev/sprites.svg#icon-plus',       variant: 'primary' },
+      { action: 'export', label: 'Exporteer naar Excel',  icon: 'dev/sprites.svg#icon-file-excel' },
+    ];
 
     // Register mrdLoadPage before init() so scroll events are caught immediately
     table.addEventListener('mrdLoadPage', async (e) => {
       const { page, sort } = e.detail;
       try {
-        const result   = await apiFetchPage(authGetToken(), dataHref, page, sort);
+        const params = new URLSearchParams();
+        if (sort) params.set('sort', sort);
+        // Apply active filters as simple ?field=value params (range = future API)
+        _activeFilters.forEach(f => {
+          if (f.operator === 'isEmpty')    { params.set(f.field, '');            return; }
+          if (f.operator === 'isNotEmpty') { params.set(f.field + '_notempty', 'true'); return; }
+          if (f.values?.length)            { params.set(f.field, f.values.join(',')); return; }
+          if (f.value != null && f.value !== '') params.set(f.field, String(f.value));
+          // Range: _from/_to suffix (future API support)
+          if (f.from != null && f.from !== '') params.set(f.field + '_from', String(f.from));
+          if (f.to   != null && f.to   !== '') params.set(f.field + '_to',   String(f.to));
+        });
+        const qs  = params.toString();
+        const url = qs ? `${dataHref}?${qs}` : dataHref;
+
+        const result   = await apiFetchPage(authGetToken(), url, page);
         const embedded = result._embedded ?? {};
         const rows     = Object.values(embedded)[0] ?? [];
         await table.setPage(page, rows);
@@ -217,6 +240,18 @@ function renderTable(columns, totalElements, pageSize, page0Rows, dataHref, defa
       await loadRecord(e.detail);
     });
 
+    // Table-level action buttons (toolbar)
+    table.addEventListener('mrdAction', (e) => {
+      logEvent('mrdAction', e.detail);
+      if (e.detail.action === 'create') loadForm();
+    });
+
+    // Store filters; mrdLoadPage will pick them up automatically
+    table.addEventListener('mrdFilter', (e) => {
+      logEvent('mrdFilter', e.detail);
+      _activeFilters = e.detail.filters;
+    });
+
     await table.init();
     await table.setPage(0, page0Rows); // inject pre-fetched page 0 — no extra request
   });
@@ -328,7 +363,7 @@ function renderForm(layout, record = null, selfHref = null) {
   }
 
   const formPanel = document.getElementById('panel-form');
-  formPanel.innerHTML = '<mrd-form id="live-form" locale="nl-NL"></mrd-form>';
+  formPanel.innerHTML = `<mrd-form id="live-form" locale="${_locale}"></mrd-form>`;
 
   customElements.whenDefined('mrd-form').then(() => {
     const form = document.getElementById('live-form');
@@ -488,7 +523,16 @@ customElements.whenDefined('mrd-form').then(() => {
 });
 
 document.getElementById('locale-select').addEventListener('change', (e) => {
-  document.getElementById('demo-form').locale = e.target.value;
+  _locale = e.target.value;
+  // Update embedded demo form
+  const demoForm = document.getElementById('demo-form');
+  if (demoForm) demoForm.locale = _locale;
+  // Update live table if present
+  const liveTable = document.getElementById('live-table');
+  if (liveTable) liveTable.locale = _locale;
+  // Update live form if present
+  const liveForm = document.getElementById('live-form');
+  if (liveForm) liveForm.locale = _locale;
 });
 
 document.getElementById('btn-inject-results').addEventListener('click', () => {

package/dist/collection/dev/sprites.svg

@@ -0,0 +1,55 @@
+<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+    <symbol id="icon-search" viewBox="0 0 32 32">
+    <path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path>
+    </symbol>
+    <symbol id="icon-bin" viewBox="0 0 32 32">
+    <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
+    <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
+    </symbol>
+    <symbol id="icon-plus" viewBox="0 0 32 32">
+    <path d="M31 12h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1v11h-11c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h11v11c0 0.552 0.448 1 1 1h6c0.552 0 1-0.448 1-1v-11h11c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1z"></path>
+    </symbol>
+    <symbol id="icon-cross" viewBox="0 0 32 32">
+    <path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z"></path>
+    </symbol>
+    <symbol id="icon-backward2" viewBox="0 0 32 32">
+    <path d="M18 5v10l10-10v22l-10-10v10l-11-11z"></path>
+    </symbol>
+    <symbol id="icon-forward3" viewBox="0 0 32 32">
+    <path d="M16 27v-10l-10 10v-22l10 10v-10l11 11z"></path>
+    </symbol>
+    <symbol id="icon-previous2" viewBox="0 0 32 32">
+    <path d="M8 28v-24h4v11l10-10v22l-10-10v11z"></path>
+    </symbol>
+    <symbol id="icon-next2" viewBox="0 0 32 32">
+    <path d="M24 4v24h-4v-11l-10 10v-22l10 10v-11z"></path>
+    </symbol>
+    <symbol id="icon-sort-alpha-asc" viewBox="0 0 32 32">
+    <path d="M10 24v-24h-4v24h-5l7 7 7-7h-5z"></path>
+    <path d="M29 32h-8c-0.369 0-0.708-0.203-0.882-0.528s-0.155-0.72 0.050-1.027l6.963-10.445h-6.131c-0.552 0-1-0.448-1-1s0.448-1 1-1h8c0.369 0 0.708 0.203 0.882 0.528s0.155 0.72-0.050 1.027l-6.963 10.445h6.131c0.552 0 1 0.448 1 1s-0.448 1-1 1z"></path>
+    <path d="M31.894 12.553l-6-12c-0.169-0.339-0.516-0.553-0.894-0.553s-0.725 0.214-0.895 0.553l-6 12c-0.247 0.494-0.047 1.095 0.447 1.342 0.144 0.072 0.296 0.106 0.447 0.106 0.367 0 0.72-0.203 0.895-0.553l1.724-3.447h6.764l1.724 3.447c0.247 0.494 0.848 0.694 1.342 0.447s0.694-0.848 0.447-1.342zM22.618 8l2.382-4.764 2.382 4.764h-4.764z"></path>
+    </symbol>
+    <symbol id="icon-sort-alpha-desc" viewBox="0 0 32 32">
+    <path d="M10 24v-24h-4v24h-5l7 7 7-7h-5z"></path>
+    <path d="M29 14h-8c-0.369 0-0.708-0.203-0.882-0.528s-0.155-0.72 0.050-1.027l6.963-10.445h-6.131c-0.552 0-1-0.448-1-1s0.448-1 1-1h8c0.369 0 0.708 0.203 0.882 0.528s0.155 0.72-0.050 1.027l-6.963 10.445h6.131c0.552 0 1 0.448 1 1s-0.448 1-1 1z"></path>
+    <path d="M31.894 30.553l-6-12c-0.169-0.339-0.516-0.553-0.894-0.553s-0.725 0.214-0.895 0.553l-6 12c-0.247 0.494-0.047 1.095 0.447 1.342 0.144 0.072 0.296 0.106 0.447 0.106 0.367 0 0.72-0.203 0.895-0.553l1.724-3.447h6.764l1.724 3.447c0.247 0.494 0.848 0.694 1.342 0.447s0.694-0.848 0.447-1.342zM22.618 26l2.382-4.764 2.382 4.764h-4.764z"></path>
+    </symbol>
+    <symbol id="icon-filter" viewBox="0 0 32 32">
+    <path d="M16 0c-8.837 0-16 2.239-16 5v3l12 12v10c0 1.105 1.791 2 4 2s4-0.895 4-2v-10l12-12v-3c0-2.761-7.163-5-16-5zM2.95 4.338c0.748-0.427 1.799-0.832 3.040-1.171 2.748-0.752 6.303-1.167 10.011-1.167s7.262 0.414 10.011 1.167c1.241 0.34 2.292 0.745 3.040 1.171 0.494 0.281 0.76 0.519 0.884 0.662-0.124 0.142-0.391 0.38-0.884 0.662-0.748 0.427-1.8 0.832-3.040 1.171-2.748 0.752-6.303 1.167-10.011 1.167s-7.262-0.414-10.011-1.167c-1.24-0.34-2.292-0.745-3.040-1.171-0.494-0.282-0.76-0.519-0.884-0.662 0.124-0.142 0.391-0.38 0.884-0.662z"></path>
+    </symbol>
+    <symbol id="icon-file-excel" viewBox="0 0 32 32">
+    <path d="M23.22 12h-4.228l-2.992 4.407-2.992-4.407h-4.228l5.068 7.577-5.718 8.423h7.87v-2.862h-1.567l1.567-2.344 3.481 5.205h4.389l-5.718-8.423 5.068-7.577z"></path>
+    <path d="M28.681 7.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378 0-2.5 1.121-2.5 2.5v27c0 1.378 1.121 2.5 2.5 2.5h23c1.378 0 2.5-1.122 2.5-2.5v-19.5c0-0.448-0.137-1.23-1.319-2.841v0zM24.543 5.457c0.959 0.959 1.712 1.825 2.268 2.543h-4.811v-4.811c0.718 0.556 1.584 1.309 2.543 2.268v0zM28 29.5c0 0.271-0.229 0.5-0.5 0.5h-23c-0.271 0-0.5-0.229-0.5-0.5v-27c0-0.271 0.229-0.5 0.5-0.5 0 0 15.499-0 15.5 0v7c0 0.552 0.448 1 1 1h7v19.5z"></path>
+    </symbol>
+    <symbol id="icon-pencil" viewBox="0 0 32 32">
+    <path d="M27.414 0.586c-0.781-0.781-2.048-0.781-2.828 0l-3.172 3.172 5.828 5.828 3.172-3.172c0.781-0.781 0.781-2.047 0-2.828l-3-3zM0 24v8h8l17.414-17.414-8-8-17.414 17.414zM6.828 28h-2.828v-2.828l12-12 2.828 2.828-12 12z"></path>
+    </symbol>
+    <symbol id="icon-ellipsis" viewBox="0 0 32 32">
+    <circle cx="4" cy="16" r="3.5"></circle>
+    <circle cx="16" cy="16" r="3.5"></circle>
+    <circle cx="28" cy="16" r="3.5"></circle>
+    </symbol>
+    </defs>
+    </svg>
+