← Back Office design system

Product draweras-is · runtime

The right-hand product selector drawer («Məhsulları seçin») the client panel opens wherever a flow needs products picked into a table — supplies, transfers, waste. Verbatim production snapshot (İnventar → Tədarüklər → Yarat, 29 Aug 2026): search field, Növ / Kateqoriya / Şöbə / Etiket filter chips, «+ Yarat», «Siyahıda göstər» columns manager, bulk checkboxes, the product table and a green «Saxla». Runtime element: <bo-product-drawer> (components/product-drawer.js) — pages must also load the panel CSS bundle. Used by create-supply · b-original.

Live drawer

The element renders closed by default (add the open attribute to start open). ✕, backdrop click and Esc close it; the body gets the production scroll-lock classes while open.
bağlıdır

Usage

Two lines on any page that already loads vendor/clopos-panel.css. All markup, styles and behaviour come from the component.
<script src=".../design-system/components/product-drawer.js"></script>
<bo-product-drawer open count="593"></bo-product-drawer>

el.open() · el.close() · el.toggle()          // programmatic API
el.addEventListener('bo-drawer-open', …)      // bubbling CustomEvents
el.addEventListener('bo-drawer-close', …)
Element
<bo-product-drawer> — display:contents, injects the verbatim snapshot
Width
production rs-drawer-md (bundle-defined, ~800px) + full-height, slides from the right
Attributes
open — starts open · count — overrides the «/ 593» counter
Closes on
✕ button · backdrop click · Esc
Body state
toggles rs-drawer-open rs-drawer-has-backdrop (production scroll-lock)
Events
bo-drawer-open / bo-drawer-close, bubbling
Static parts
search, filter chips, «+ Yarat», columns manager, checkboxes and «Saxla» are snapshot-only — no behaviour
Source
client.clopos.com · Tədarüklər → Yarat · CSS bundle pages/create-supply/vendor/clopos-panel.css