Search and sample materials on Material Bank (2024)

Material Bank logo

Not a registered user? Register

Thank you for using
Material Bank.

`; const subnavList = item.querySelector('.subnav-list'); subnavList.insertAdjacentHTML('beforeend', kbisSubmenu); } } return list; }, createLinkElement(categoryLabel = null, level, item) { const self = this; const link = document.createElement('a'); link.textContent = 'View All'; if (categoryLabel !== null) { link.textContent = categoryLabel; } link.setAttribute('href', '#'); link.dataset.level = level; link.classList.add('flex', 'justify-between', 'py-4', 'border-b', 'border-mbgray-110'); link.appendChild(this.createArrowIcon()); link.addEventListener('click', function (e) { e.preventDefault(); let subnav = item.querySelector('.subnav-list'); let currentLevel = e.target.dataset.level; const linkLabel = e.target.textContent.trim(); if (subnav && categoryLabel !== null) { self.categoriesLabel.push(linkLabel); subnav.classList.toggle('hidden'); const linkLevel = self.$refs['menu-content'].querySelectorAll('[data-level="'+currentLevel+'"]:not(.hidden)'); if (linkLevel.length) { for (const link of linkLevel) { link.classList.add('hidden'); } } } else { self.redirectLink(categoryLabel); } }); return link; }, createArrowIcon() { const div = document.createElement('div'); div.classList.add('pointer-events-none'); div.innerHTML = ``; return div; }, redirectLink(lastLabel = null) { const baseUrl = BASE_URL; const taxonomyFilter = 'search?q=#/filter:taxonomy:'; const endOfUrl = '#/page:1'; let categoriesLabel = this.categoriesLabel.join('$253E'); categoriesLabel = categoriesLabel.replace(/\s+/g, '$2520'); if (lastLabel) { categoriesLabel += '$253E' + lastLabel.replace(/\s+/g, '$2520'); } window.dispatchEvent( new CustomEvent("close-mobile-nav") ); this.closem*nu(); // Remove saved SS query, to prevent taxonomy redirect with query and wrong results sessionStorage.removeItem('persistentQuery'); window.location.href = baseUrl + taxonomyFilter + categoriesLabel + endOfUrl; document.dispatchEvent(new CustomEvent('megaMenuClick', {})); }, createBackButton() { const self = this; let backButton = document.createElement('button'); backButton.classList.add('back-button'); backButton.setAttribute('x-ref', 'back-list'); backButton.innerHTML = ``; backButton.addEventListener('click', function () { self.backToPreviousMenu(); }); return backButton; }, backToPreviousMenu() { const navList = this.$refs['menu-content']; let subnavs = navList.querySelectorAll('.subnav-list:not(.hidden)'); let currentSubnav = subnavs[subnavs.length - 1]; if (currentSubnav) { this.closeSubnav(currentSubnav); } else { this.categoriesLabel = []; this.open = false; } }, closeSubnav(currentSubnav) { const navList = this.$refs['menu-content']; currentSubnav.classList.add('hidden'); let parentLink = currentSubnav.parentNode.querySelector('a.hidden'); if (parentLink) { let currentLevel = parentLink.dataset.level; const linkLevel = navList.querySelectorAll('[data-level="'+currentLevel+'"].hidden'); if (linkLevel.length) { for (const link of linkLevel) { link.classList.remove('hidden'); } } let currentLabel = parentLink.textContent.trim(); let index = this.categoriesLabel.indexOf(currentLabel); if (index !== -1) { this.categoriesLabel.splice(index, 1); } } }, checkKbisEnabled(event) { if (event.detail) { this.isKbisEnabled = event.detail; } }, } }

Brands

Inspiration

Workspace

Material Bank

Colormix 2022: Opus

Color creates movement, composing a unique masterwork of dynamic transitions and stirring rhythms. This palette of dusky deep tones and unexpected accents was created to be a new kind of classical, to set drama and emotion to the art of good style, and to never, ever fade into the background.

My Profile

Contact Info

First Name
Last Name
Email
Office Phone
Mobile Phone

Country

City
Zip

Preferences

Preferred Contact Method
Urgent Order Notification

Receive urgent text notifications related to your order

216">

Edit Profile

`; div.appendChild(article); } } function generateLabel(fieldId, labelTxt, isDisabled = false, isRequired = false) { const label = document.createElement('label'); label.classList.add('label', 'form-label'); if (isDisabled) { label.classList.add('text-mbgray-200', 'cursor-not-allowed'); } label.setAttribute('for', fieldId); label.innerText = labelTxt + (isRequired && !isDisabled ? '*' : ''); return label; } function attachCustomAttributes(attribute, field) { if (!(attribute.hasOwnProperty('custom_attributes') && attribute.custom_attributes)) { return; } attribute.custom_attributes.forEach(attribute => { const existingAttribute = field.getAttribute(attribute.name); if (existingAttribute) { if (existingAttribute.includes('{')) { const existingObjValue = existingAttribute.substring(existingAttribute.indexOf('{') + 1, existingAttribute.lastIndexOf('}')); const newObjValue = attribute.value.substring(attribute.value.indexOf('{') + 1, attribute.value.lastIndexOf('}')); field.setAttribute(attribute.name, `{ ${newObjValue}, ${existingObjValue} }`); } else { field.setAttribute(attribute.name, `${attribute.value}; ${existingAttribute}`); } } else { field.setAttribute(attribute.name, attribute.value); } }); } function generateCustomSelect(attribute) { /** * TODO: Move custom select element to a script scope once AlpineJs v3 is installed * in order to use the scope inheritance that's not available on previously versions */ const field = document.createElement('input'); field.setAttribute('type', 'hidden'); field.setAttribute('name', attribute.code); field.setAttribute('id', attribute.code); field.setAttribute('x-ref', attribute.code); field.setAttribute('placeholder', ' '); if (attribute.is_required) { field.required = true; } field.classList.add('form-select', 'peer'); const valueWrapper = document.createElement('div'); valueWrapper.classList.add('flex', 'justify-between', 'items-center', 'form-input', 'peer', 'overflow-ellipsis', 'overflow-hidden', 'min-h-[33px]'); valueWrapper.setAttribute('x-ref', `${attribute.code}_button`); valueWrapper.setAttribute('tabindex', '0'); valueWrapper.innerHTML = ` `; const optionsList = document.createElement('ul'); optionsList.classList.add('w-full', 'absolute', 'hidden', 'flex-col', 'gap-y-4', 'p-4', 'z-20', 'cursor-pointer', 'bg-white', 'overflow-y-auto', 'shadow-xl', 'overflow-x-hidden', 'max-h-[80vh]', 'group-focus-within:flex', 'md:max-h-[372px]', 'md:gap-y-1', 'md:p-2', 'md:rounded-lg', 'max-md:fixed', 'max-md:bottom-0', 'max-md:max-w-full', 'max-md:left-0', 'max-md:rounded-tl-2xl', 'max-md:rounded-tr-2xl'); optionsList.setAttribute('tabindex', '0'); optionsList.insertAdjacentHTML( 'afterbegin', `

${attribute.label}

` ); if (typeof attribute.options === 'object' && !Array.isArray(attribute.options)) { attribute.options = Object.values(attribute.options); } attribute.options.forEach(option => { const optValue = option.value ?? option.code; const optLabel = option.label ?? option.name; if (!optValue) { return; } optionsList.insertAdjacentHTML( 'beforeend', `

${optLabel}

` ); }); field.setAttribute('x-on:change', 'onChange($event)'); attachCustomAttributes(attribute, field); attribute.hasOwnProperty('custom_classes') ? attribute.custom_classes.push('group', 'relative') : attribute.custom_classes = ['group', 'relative']; const wrapper = wrapField(field, attribute); wrapper.appendChild(generateBackDrop()); wrapper.appendChild(valueWrapper); wrapper.appendChild(optionsList); return wrapper; } function generateMultilineFields(attribute, nLines) { if (isNaN(nLines)) { nLines = 2; // Min value allowed } const fieldsArr = []; for (let i = 1; nLines >= i; i++) { const fieldId = attribute.code + `_${i}`; const field = document.createElement('input'); field.setAttribute('type', 'text'); field.setAttribute('name', `${attribute.code}[${i - 1}]`); field.setAttribute('id', fieldId); field.setAttribute('maxlength', '50'); field.setAttribute('placeholder', ' '); field.classList.add('form-input', 'peer'); if (fieldId === 'street_1') { field.setAttribute('x-on:keyup.debounce', 'addressAutocomplete($event.target)'); field.setAttribute('x-on:focus', 'suggestionsOpen = true'); field.setAttribute('x-on:click.away', 'suggestionsOpen = false'); field.setAttribute('autocomplete', 'none'); } attachCustomAttributes(attribute, field); const isRequired = attribute.is_required && i === 1; if (isRequired) { field.required = true; } // Set form validation event field.setAttribute('x-on:blur', 'onChange($event)'); const label = generateLabel(fieldId, `${attribute.label}` + (i === 1 ? '' : ` ${i}`), attribute.is_disabled, isRequired); const wrapper = wrapField(field, attribute, true, label); fieldsArr.push(wrapper); } return fieldsArr; } function generateTooltip(attribute) { const tooltipWrapper = document.createElement('div'); tooltipWrapper.classList.add('has-tooltip', 'ml-auto'); const tooltip = document.createElement('p'); tooltip.classList.add('-right-2', 'top-10', 'text-xs', 'p-3', 'tooltip', 'rounded-xl', 'hover:w-52'); tooltip.appendChild(document.createTextNode(attribute.help_tooltip)); tooltipWrapper.insertAdjacentHTML( 'afterbegin', '' // Remove new line from SVG ); tooltipWrapper.appendChild(tooltip); return tooltipWrapper; } function generateBackDrop() { const backDrop = document.createElement('div'); backDrop.className = 'fixed hidden inset-0 bg-black bg-opacity-30 z-10 max-md:group-focus-within:flex'; backDrop.setAttribute('x-on:click', '$event.target.blur()'); return backDrop; } function phoneCountryFields(attribute, phoneFieldEl) { phoneFieldEl.placeholder = 'Phone Number'; const countryPhoneCode = attribute.code + '_country'; const countryPhoneEl = document.createElement('input'); countryPhoneEl.name = countryPhoneCode; countryPhoneEl.id = countryPhoneCode; countryPhoneEl.placeholder = 'Country'; countryPhoneEl.type = 'hidden'; countryPhoneEl.className = 'form-input peer overflow-ellipsis overflow-hidden cursor-pointer group relative'; countryPhoneEl.setAttribute('x-ref', countryPhoneCode); countryPhoneEl.setAttribute('x-on:change', 'onChange($event); updateSelectedPhoneCountry($event.target); checkDataUpdate($event.target)'); if (attribute.is_required) { countryPhoneEl.required = true; } const valueWrapper = document.createElement('div'); valueWrapper.classList = 'flex justify-between items-center form-input peer overflow-ellipsis overflow-hidden min-h-[33px]'; valueWrapper.setAttribute('x-ref', `${countryPhoneCode}_button`); valueWrapper.setAttribute('tabindex', '0'); valueWrapper.innerHTML = `Country `; const optionsList = document.createElement('ul'); optionsList.className = 'w-full absolute hidden flex-col gap-y-4 p-4 z-20 cursor-pointer bg-white overflow-y-auto shadow-xl' + ' overflow-x-hidden max-h-[80vh] group-focus-within:flex md:w-auto md:max-h-[372px] md:gap-y-1 md:p-2' + ' md:rounded-lg max-md:fixed max-md:bottom-0 max-md:max-w-full max-md:left-0 max-md:rounded-tl-2xl max-md:rounded-tr-2xl'; optionsList.setAttribute('tabindex', '0'); optionsList.insertAdjacentHTML( 'afterbegin', `

${attribute.label}

` ); const allowedCountries = [{"code":"CA","label":"Canada","regions":[{"code":66,"label":"Alberta"},{"code":67,"label":"British Columbia"},{"code":68,"label":"Manitoba"},{"code":70,"label":"New Brunswick"},{"code":69,"label":"Newfoundland and Labrador"},{"code":72,"label":"Northwest Territories"},{"code":71,"label":"Nova Scotia"},{"code":73,"label":"Nunavut"},{"code":74,"label":"Ontario"},{"code":75,"label":"Prince Edward Island"},{"code":76,"label":"Quebec"},{"code":77,"label":"Saskatchewan"},{"code":78,"label":"Yukon Territory"}]},{"code":"US","label":"United States","regions":[{"code":1,"label":"Alabama"},{"code":4,"label":"Arizona"},{"code":5,"label":"Arkansas"},{"code":12,"label":"California"},{"code":13,"label":"Colorado"},{"code":14,"label":"Connecticut"},{"code":15,"label":"Delaware"},{"code":16,"label":"District of Columbia"},{"code":18,"label":"Florida"},{"code":19,"label":"Georgia"},{"code":22,"label":"Idaho"},{"code":23,"label":"Illinois"},{"code":24,"label":"Indiana"},{"code":25,"label":"Iowa"},{"code":26,"label":"Kansas"},{"code":27,"label":"Kentucky"},{"code":28,"label":"Louisiana"},{"code":29,"label":"Maine"},{"code":31,"label":"Maryland"},{"code":32,"label":"Massachusetts"},{"code":33,"label":"Michigan"},{"code":34,"label":"Minnesota"},{"code":35,"label":"Mississippi"},{"code":36,"label":"Missouri"},{"code":37,"label":"Montana"},{"code":38,"label":"Nebraska"},{"code":39,"label":"Nevada"},{"code":40,"label":"New Hampshire"},{"code":41,"label":"New Jersey"},{"code":42,"label":"New Mexico"},{"code":43,"label":"New York"},{"code":44,"label":"North Carolina"},{"code":45,"label":"North Dakota"},{"code":47,"label":"Ohio"},{"code":48,"label":"Oklahoma"},{"code":49,"label":"Oregon"},{"code":51,"label":"Pennsylvania"},{"code":53,"label":"Rhode Island"},{"code":54,"label":"South Carolina"},{"code":55,"label":"South Dakota"},{"code":56,"label":"Tennessee"},{"code":57,"label":"Texas"},{"code":58,"label":"Utah"},{"code":59,"label":"Vermont"},{"code":61,"label":"Virginia"},{"code":62,"label":"Washington"},{"code":63,"label":"West Virginia"},{"code":64,"label":"Wisconsin"},{"code":65,"label":"Wyoming"}]}]; allowedCountries.forEach(country => { const optValue = country.code; const optLabel = country.label; if (!optValue) { return; } optionsList.insertAdjacentHTML( 'beforeend', `

${optLabel}

` ); }); // Phone Country dropdown element const countryWrapper = wrapField(countryPhoneEl, {custom_classes: ['col-span-1', 'group', 'relative']}, false); countryWrapper.appendChild(generateBackDrop()); countryWrapper.appendChild(valueWrapper); countryWrapper.appendChild(optionsList); // Phone text field element attribute.custom_classes ? attribute.custom_classes.push('col-span-3') : attribute['custom_classes'] = ['col-span-3']; const phoneWrapper = wrapField(phoneFieldEl, attribute, false); const phoneSection = document.createElement('div'); phoneSection.className = 'relative grid grid-cols-4 gap-x-3 col-span-2'; phoneSection.appendChild( generateLabel(attribute.code, attribute.label, false, attribute.is_required) ); phoneSection.appendChild(countryWrapper); phoneSection.appendChild(phoneWrapper); return phoneSection; }

{ selectedCountry = $event.detail.address && 'country_id' in $event.detail.address && $event.detail.address.country_id ? $event.detail.address.country_id : selectedCountry; addressData.country_name = $event.detail.address && 'country_name' in $event.detail.address && $event.detail.address.country_name ? $event.detail.address.country_name : ''; countrySearch = addressData.country_name; updateStateRequired(); setRegionsByCountry(); sanitizeFormData($event.detail.address); checkIsEdit($event.detail); checkIsFirstAddress($event.detail); initFormValidation(); });" @private-content-loaded.window="initCustomerCountry($event.detail.data)" @close-address-form.window="closeForm()">