@tuki-io/tuki-widgets 0.0.113 → 0.0.114

package/esm2020/users-list/src/components/table-toolbar/table-toolbar.component.mjs

@@ -0,0 +1,23 @@
+import { Component, EventEmitter, Output } from "@angular/core";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+export class TableToolbarComponent {
+    constructor() {
+        this.searchChange = new EventEmitter();
+    }
+    onSearchInputChange(event) {
+        const value = event.target.value.trim().toLowerCase() || '';
+        if (this.timerId)
+            window.clearTimeout(this.timerId);
+        this.timerId = window.setTimeout(() => this.searchChange.emit(value), 500);
+    }
+}
+TableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableToolbarComponent, selector: "tk-users-table-toolbar", outputs: { searchChange: "searchChange" }, ngImport: i0, template: "<header style=\"margin-bottom: 1rem;\">\r\n    <div style=\"display: flex; align-items: center; justify-content: space-between;\">\r\n      <div class=\"collection-header-left\">\r\n        <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n          <!-- Search Input -->\r\n          <div style=\"position: relative; width: fit-content; min-width: 200px;\">\r\n            <input (input)=\"onSearchInputChange($event)\" type=\"text\" placeholder=\"Search by display name, email\" style=\"width: 100%; height: 34px; border-radius: .5rem; font-size: 16px; padding: 6px 12px 6px 44px; border: 1px solid #00000080; background: #fff; color: #222; outline: none; box-sizing: border-box; min-width: 280px;\">\r\n            <span style=\"position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #757575; font-size: 18px; font-weight: normal; pointer-events: none;\">\r\n              <i class=\"material-icons\" style=\"font-size: 18px; font-weight: normal;\">search</i>\r\n            </span>\r\n          </div>\r\n          <span style=\"margin: 0 4px; color: #757575; font-size: 1rem;\">or</span>\r\n          <!-- Filter Select -->\r\n          <div style=\"display: flex; align-items: center; position: relative; width: fit-content; min-width: 200px;\">\r\n            <span style=\"position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #757575; font-size: 18px; font-weight: normal; pointer-events: none;\">\r\n              <i class=\"material-icons\" style=\"font-size: 18px; font-weight: normal;\">filter_list</i>\r\n            </span>\r\n            <select style=\"height: 34px; border-radius: .5rem; font-size: 16px; padding: 6px 32px 6px 44px; border: 1px solid #00000080; background: #fff; min-width: 200px; width: fit-content; color: #222; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url('data:image/svg+xml;utf8,<svg fill=\\'%23757575\\' height=\\'20\\' viewBox=\\'0 0 24 24\\' width=\\'20\\' xmlns=\\'http://www.w3.org/2000/svg\\'><path d=\\'M7 10l5 5 5-5z\\'/></svg>'); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px;\">\r\n              <option>Filter</option>\r\n            </select>\r\n          </div>\r\n          <span style=\"margin: 0 4px; color: #757575; font-size: 1rem;\">or</span>\r\n          <!-- Location Select -->\r\n          <select style=\"height: 34px; border-radius: .5rem; font-size: 16px; padding: 6px 32px 6px 12px; border: 1px solid #00000080; background: #fff; min-width: 200px; width: fit-content; color: #222; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url('data:image/svg+xml;utf8,<svg fill=\\'%23757575\\' height=\\'20\\' viewBox=\\'0 0 24 24\\' width=\\'20\\' xmlns=\\'http://www.w3.org/2000/svg\\'><path d=\\'M7 10l5 5 5-5z\\'/></svg>'); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px;\">\r\n            <option>Select a Location</option>\r\n          </select>\r\n          <span style=\"margin-left: 8px; color: #757575; font-size: 1rem; white-space: nowrap;\">5 users</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"collection-header-right\">\r\n        <button class=\"btn si\">\r\n          Send invitations\r\n        </button>\r\n        <button class=\"btn mu\">\r\n          Manage users\r\n        </button>\r\n      </div>\r\n    </div>\r\n</header>", styles: [".btn{position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;width:min-content;max-width:100%;padding:0rem .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);height:2rem;cursor:pointer}.btn:hover{background-color:#0000000d}.si{border-color:#0000004d;background-color:#0000;color:#000000f2}.mu{color:#fff;background-color:#000000f2}.mu:hover{background-color:#232323e6!important}\n"], dependencies: [{ kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-users-table-toolbar', template: "<header style=\"margin-bottom: 1rem;\">\r\n    <div style=\"display: flex; align-items: center; justify-content: space-between;\">\r\n      <div class=\"collection-header-left\">\r\n        <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n          <!-- Search Input -->\r\n          <div style=\"position: relative; width: fit-content; min-width: 200px;\">\r\n            <input (input)=\"onSearchInputChange($event)\" type=\"text\" placeholder=\"Search by display name, email\" style=\"width: 100%; height: 34px; border-radius: .5rem; font-size: 16px; padding: 6px 12px 6px 44px; border: 1px solid #00000080; background: #fff; color: #222; outline: none; box-sizing: border-box; min-width: 280px;\">\r\n            <span style=\"position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #757575; font-size: 18px; font-weight: normal; pointer-events: none;\">\r\n              <i class=\"material-icons\" style=\"font-size: 18px; font-weight: normal;\">search</i>\r\n            </span>\r\n          </div>\r\n          <span style=\"margin: 0 4px; color: #757575; font-size: 1rem;\">or</span>\r\n          <!-- Filter Select -->\r\n          <div style=\"display: flex; align-items: center; position: relative; width: fit-content; min-width: 200px;\">\r\n            <span style=\"position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #757575; font-size: 18px; font-weight: normal; pointer-events: none;\">\r\n              <i class=\"material-icons\" style=\"font-size: 18px; font-weight: normal;\">filter_list</i>\r\n            </span>\r\n            <select style=\"height: 34px; border-radius: .5rem; font-size: 16px; padding: 6px 32px 6px 44px; border: 1px solid #00000080; background: #fff; min-width: 200px; width: fit-content; color: #222; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url('data:image/svg+xml;utf8,<svg fill=\\'%23757575\\' height=\\'20\\' viewBox=\\'0 0 24 24\\' width=\\'20\\' xmlns=\\'http://www.w3.org/2000/svg\\'><path d=\\'M7 10l5 5 5-5z\\'/></svg>'); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px;\">\r\n              <option>Filter</option>\r\n            </select>\r\n          </div>\r\n          <span style=\"margin: 0 4px; color: #757575; font-size: 1rem;\">or</span>\r\n          <!-- Location Select -->\r\n          <select style=\"height: 34px; border-radius: .5rem; font-size: 16px; padding: 6px 32px 6px 12px; border: 1px solid #00000080; background: #fff; min-width: 200px; width: fit-content; color: #222; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url('data:image/svg+xml;utf8,<svg fill=\\'%23757575\\' height=\\'20\\' viewBox=\\'0 0 24 24\\' width=\\'20\\' xmlns=\\'http://www.w3.org/2000/svg\\'><path d=\\'M7 10l5 5 5-5z\\'/></svg>'); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px;\">\r\n            <option>Select a Location</option>\r\n          </select>\r\n          <span style=\"margin-left: 8px; color: #757575; font-size: 1rem; white-space: nowrap;\">5 users</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"collection-header-right\">\r\n        <button class=\"btn si\">\r\n          Send invitations\r\n        </button>\r\n        <button class=\"btn mu\">\r\n          Manage users\r\n        </button>\r\n      </div>\r\n    </div>\r\n</header>", styles: [".btn{position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;width:min-content;max-width:100%;padding:0rem .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);height:2rem;cursor:pointer}.btn:hover{background-color:#0000000d}.si{border-color:#0000004d;background-color:#0000;color:#000000f2}.mu{color:#fff;background-color:#000000f2}.mu:hover{background-color:#232323e6!important}\n"] }]
+        }], propDecorators: { searchChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtdG9vbGJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90dWtpL3dpZGdldHMvdXNlcnMtbGlzdC9zcmMvY29tcG9uZW50cy90YWJsZS10b29sYmFyL3RhYmxlLXRvb2xiYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdHVraS93aWRnZXRzL3VzZXJzLWxpc3Qvc3JjL2NvbXBvbmVudHMvdGFibGUtdG9vbGJhci90YWJsZS10b29sYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBT3hFLE1BQU0sT0FBTyxxQkFBcUI7SUFMbEM7UUFNdUIsaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0tBV2hFO0lBUEcsbUJBQW1CLENBQUMsS0FBWTtRQUM1QixNQUFNLEtBQUssR0FBSSxLQUFLLENBQUMsTUFBMkIsQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUMsV0FBVyxFQUFFLElBQUksRUFBRSxDQUFDO1FBRWxGLElBQUksSUFBSSxDQUFDLE9BQU87WUFBRSxNQUFNLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUVwRCxJQUFJLENBQUMsT0FBTyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7SUFDL0UsQ0FBQzs7bUhBWFEscUJBQXFCO3VHQUFyQixxQkFBcUIseUdDUGxDLDY0R0FzQ1M7NEZEL0JJLHFCQUFxQjtrQkFMakMsU0FBUzsrQkFDSSx3QkFBd0I7OEJBS2YsWUFBWTtzQkFBOUIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBPbkluaXQsIE91dHB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAndGstdXNlcnMtdGFibGUtdG9vbGJhcicsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vdGFibGUtdG9vbGJhci5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi90YWJsZS10b29sYmFyLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFRhYmxlVG9vbGJhckNvbXBvbmVudCB7XHJcbiAgICBAT3V0cHV0KCkgcmVhZG9ubHkgc2VhcmNoQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XHJcblxyXG4gICAgcHJpdmF0ZSB0aW1lcklkITogbnVtYmVyOyBcclxuXHJcbiAgICBvblNlYXJjaElucHV0Q2hhbmdlKGV2ZW50OiBFdmVudCk6IHZvaWQge1xyXG4gICAgICAgIGNvbnN0IHZhbHVlID0gKGV2ZW50LnRhcmdldCBhcyBIVE1MSW5wdXRFbGVtZW50KS52YWx1ZS50cmltKCkudG9Mb3dlckNhc2UoKSB8fCAnJztcclxuXHJcbiAgICAgICAgaWYgKHRoaXMudGltZXJJZCkgd2luZG93LmNsZWFyVGltZW91dCh0aGlzLnRpbWVySWQpO1xyXG5cclxuICAgICAgICB0aGlzLnRpbWVySWQgPSB3aW5kb3cuc2V0VGltZW91dCgoKSA9PiB0aGlzLnNlYXJjaENoYW5nZS5lbWl0KHZhbHVlKSwgNTAwKTtcclxuICAgIH1cclxufSIsIjxoZWFkZXIgc3R5bGU9XCJtYXJnaW4tYm90dG9tOiAxcmVtO1wiPlxyXG4gICAgPGRpdiBzdHlsZT1cImRpc3BsYXk6IGZsZXg7IGFsaWduLWl0ZW1zOiBjZW50ZXI7IGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcIj5cclxuICAgICAgPGRpdiBjbGFzcz1cImNvbGxlY3Rpb24taGVhZGVyLWxlZnRcIj5cclxuICAgICAgICA8ZGl2IHN0eWxlPVwiZGlzcGxheTogZmxleDsgYWxpZ24taXRlbXM6IGNlbnRlcjsgZ2FwOiAxMnB4O1wiPlxyXG4gICAgICAgICAgPCEtLSBTZWFyY2ggSW5wdXQgLS0+XHJcbiAgICAgICAgICA8ZGl2IHN0eWxlPVwicG9zaXRpb246IHJlbGF0aXZlOyB3aWR0aDogZml0LWNvbnRlbnQ7IG1pbi13aWR0aDogMjAwcHg7XCI+XHJcbiAgICAgICAgICAgIDxpbnB1dCAoaW5wdXQpPVwib25TZWFyY2hJbnB1dENoYW5nZSgkZXZlbnQpXCIgdHlwZT1cInRleHRcIiBwbGFjZWhvbGRlcj1cIlNlYXJjaCBieSBkaXNwbGF5IG5hbWUsIGVtYWlsXCIgc3R5bGU9XCJ3aWR0aDogMTAwJTsgaGVpZ2h0OiAzNHB4OyBib3JkZXItcmFkaXVzOiAuNXJlbTsgZm9udC1zaXplOiAxNnB4OyBwYWRkaW5nOiA2cHggMTJweCA2cHggNDRweDsgYm9yZGVyOiAxcHggc29saWQgIzAwMDAwMDgwOyBiYWNrZ3JvdW5kOiAjZmZmOyBjb2xvcjogIzIyMjsgb3V0bGluZTogbm9uZTsgYm94LXNpemluZzogYm9yZGVyLWJveDsgbWluLXdpZHRoOiAyODBweDtcIj5cclxuICAgICAgICAgICAgPHNwYW4gc3R5bGU9XCJwb3NpdGlvbjogYWJzb2x1dGU7IGxlZnQ6IDEycHg7IHRvcDogNTAlOyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTUwJSk7IGNvbG9yOiAjNzU3NTc1OyBmb250LXNpemU6IDE4cHg7IGZvbnQtd2VpZ2h0OiBub3JtYWw7IHBvaW50ZXItZXZlbnRzOiBub25lO1wiPlxyXG4gICAgICAgICAgICAgIDxpIGNsYXNzPVwibWF0ZXJpYWwtaWNvbnNcIiBzdHlsZT1cImZvbnQtc2l6ZTogMThweDsgZm9udC13ZWlnaHQ6IG5vcm1hbDtcIj5zZWFyY2g8L2k+XHJcbiAgICAgICAgICAgIDwvc3Bhbj5cclxuICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgPHNwYW4gc3R5bGU9XCJtYXJnaW46IDAgNHB4OyBjb2xvcjogIzc1NzU3NTsgZm9udC1zaXplOiAxcmVtO1wiPm9yPC9zcGFuPlxyXG4gICAgICAgICAgPCEtLSBGaWx0ZXIgU2VsZWN0IC0tPlxyXG4gICAgICAgICAgPGRpdiBzdHlsZT1cImRpc3BsYXk6IGZsZXg7IGFsaWduLWl0ZW1zOiBjZW50ZXI7IHBvc2l0aW9uOiByZWxhdGl2ZTsgd2lkdGg6IGZpdC1jb250ZW50OyBtaW4td2lkdGg6IDIwMHB4O1wiPlxyXG4gICAgICAgICAgICA8c3BhbiBzdHlsZT1cInBvc2l0aW9uOiBhYnNvbHV0ZTsgbGVmdDogMTJweDsgdG9wOiA1MCU7IHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtNTAlKTsgY29sb3I6ICM3NTc1NzU7IGZvbnQtc2l6ZTogMThweDsgZm9udC13ZWlnaHQ6IG5vcm1hbDsgcG9pbnRlci1ldmVudHM6IG5vbmU7XCI+XHJcbiAgICAgICAgICAgICAgPGkgY2xhc3M9XCJtYXRlcmlhbC1pY29uc1wiIHN0eWxlPVwiZm9udC1zaXplOiAxOHB4OyBmb250LXdlaWdodDogbm9ybWFsO1wiPmZpbHRlcl9saXN0PC9pPlxyXG4gICAgICAgICAgICA8L3NwYW4+XHJcbiAgICAgICAgICAgIDxzZWxlY3Qgc3R5bGU9XCJoZWlnaHQ6IDM0cHg7IGJvcmRlci1yYWRpdXM6IC41cmVtOyBmb250LXNpemU6IDE2cHg7IHBhZGRpbmc6IDZweCAzMnB4IDZweCA0NHB4OyBib3JkZXI6IDFweCBzb2xpZCAjMDAwMDAwODA7IGJhY2tncm91bmQ6ICNmZmY7IG1pbi13aWR0aDogMjAwcHg7IHdpZHRoOiBmaXQtY29udGVudDsgY29sb3I6ICMyMjI7IGFwcGVhcmFuY2U6IG5vbmU7IC13ZWJraXQtYXBwZWFyYW5jZTogbm9uZTsgLW1vei1hcHBlYXJhbmNlOiBub25lOyBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJ2RhdGE6aW1hZ2Uvc3ZnK3htbDt1dGY4LDxzdmcgZmlsbD1cXCclMjM3NTc1NzVcXCcgaGVpZ2h0PVxcJzIwXFwnIHZpZXdCb3g9XFwnMCAwIDI0IDI0XFwnIHdpZHRoPVxcJzIwXFwnIHhtbG5zPVxcJ2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXFwnPjxwYXRoIGQ9XFwnTTcgMTBsNSA1IDUtNXpcXCcvPjwvc3ZnPicpOyBiYWNrZ3JvdW5kLXJlcGVhdDogbm8tcmVwZWF0OyBiYWNrZ3JvdW5kLXBvc2l0aW9uOiByaWdodCAxMnB4IGNlbnRlcjsgYmFja2dyb3VuZC1zaXplOiAyMHB4IDIwcHg7XCI+XHJcbiAgICAgICAgICAgICAgPG9wdGlvbj5GaWx0ZXI8L29wdGlvbj5cclxuICAgICAgICAgICAgPC9zZWxlY3Q+XHJcbiAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgIDxzcGFuIHN0eWxlPVwibWFyZ2luOiAwIDRweDsgY29sb3I6ICM3NTc1NzU7IGZvbnQtc2l6ZTogMXJlbTtcIj5vcjwvc3Bhbj5cclxuICAgICAgICAgIDwhLS0gTG9jYXRpb24gU2VsZWN0IC0tPlxyXG4gICAgICAgICAgPHNlbGVjdCBzdHlsZT1cImhlaWdodDogMzRweDsgYm9yZGVyLXJhZGl1czogLjVyZW07IGZvbnQtc2l6ZTogMTZweDsgcGFkZGluZzogNnB4IDMycHggNnB4IDEycHg7IGJvcmRlcjogMXB4IHNvbGlkICMwMDAwMDA4MDsgYmFja2dyb3VuZDogI2ZmZjsgbWluLXdpZHRoOiAyMDBweDsgd2lkdGg6IGZpdC1jb250ZW50OyBjb2xvcjogIzIyMjsgYXBwZWFyYW5jZTogbm9uZTsgLXdlYmtpdC1hcHBlYXJhbmNlOiBub25lOyAtbW96LWFwcGVhcmFuY2U6IG5vbmU7IGJhY2tncm91bmQtaW1hZ2U6IHVybCgnZGF0YTppbWFnZS9zdmcreG1sO3V0ZjgsPHN2ZyBmaWxsPVxcJyUyMzc1NzU3NVxcJyBoZWlnaHQ9XFwnMjBcXCcgdmlld0JveD1cXCcwIDAgMjQgMjRcXCcgd2lkdGg9XFwnMjBcXCcgeG1sbnM9XFwnaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcXCc+PHBhdGggZD1cXCdNNyAxMGw1IDUgNS01elxcJy8+PC9zdmc+Jyk7IGJhY2tncm91bmQtcmVwZWF0OiBuby1yZXBlYXQ7IGJhY2tncm91bmQtcG9zaXRpb246IHJpZ2h0IDEycHggY2VudGVyOyBiYWNrZ3JvdW5kLXNpemU6IDIwcHggMjBweDtcIj5cclxuICAgICAgICAgICAgPG9wdGlvbj5TZWxlY3QgYSBMb2NhdGlvbjwvb3B0aW9uPlxyXG4gICAgICAgICAgPC9zZWxlY3Q+XHJcbiAgICAgICAgICA8c3BhbiBzdHlsZT1cIm1hcmdpbi1sZWZ0OiA4cHg7IGNvbG9yOiAjNzU3NTc1OyBmb250LXNpemU6IDFyZW07IHdoaXRlLXNwYWNlOiBub3dyYXA7XCI+NSB1c2Vyczwvc3Bhbj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJjb2xsZWN0aW9uLWhlYWRlci1yaWdodFwiPlxyXG4gICAgICAgIDxidXR0b24gY2xhc3M9XCJidG4gc2lcIj5cclxuICAgICAgICAgIFNlbmQgaW52aXRhdGlvbnNcclxuICAgICAgICA8L2J1dHRvbj5cclxuICAgICAgICA8YnV0dG9uIGNsYXNzPVwiYnRuIG11XCI+XHJcbiAgICAgICAgICBNYW5hZ2UgdXNlcnNcclxuICAgICAgICA8L2J1dHRvbj5cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuPC9oZWFkZXI+Il19