@htmlbricks/mcp 0.66.13 → 0.66.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/AGENT_WEBCOMPONENTS_REFERENCE.md +200 -105
- package/assets/list.json +1 -1
- package/package.json +1 -1
|
@@ -37,107 +37,107 @@ Cross-check: README table (authoritative for attributes) + `definitions.componen
|
|
|
37
37
|
### Table of contents — how to use this with LLMs
|
|
38
38
|
|
|
39
39
|
- The **full text** of each component’s `README.md` is **included later in this same document**, under an HTML anchor `id="wc-<folder>"` (Markdown link: `#wc-<folder>`).
|
|
40
|
-
- The **jsDelivr** URL is the **canonical** `README.md` from npm (`@htmlbricks/hb-<folder>` at version **0.66.
|
|
40
|
+
- The **jsDelivr** URL is the **canonical** `README.md` from npm (`@htmlbricks/hb-<folder>` at version **0.66.14**). The prose merged **below this TOC** is the **same document body** (duplicate for single-file reading).
|
|
41
41
|
- When answering **from this file only**, use the **in-document** link (`#wc-…`) so the model stays in one context. Use the **jsDelivr** link when you need the standalone README URL (e.g. fetching from the CDN).
|
|
42
42
|
|
|
43
43
|
## Table of contents
|
|
44
44
|
|
|
45
45
|
Each line lists: **tag — folder**, then **canonical README (npm/jsDelivr)**, then **same content inside this file**.
|
|
46
46
|
|
|
47
|
-
- **`hb-area-code` — `area-code`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-area-code@0.66.
|
|
48
|
-
- **`hb-auth` — `auth`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-auth@0.66.
|
|
49
|
-
- **`hb-auth-social-login-button` — `auth-social-login-button`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-auth-social-login-button@0.66.
|
|
50
|
-
- **`hb-banner` — `banner`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-banner@0.66.
|
|
51
|
-
- **`hb-calendar-appointments` — `calendar-appointments`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-calendar-appointments@0.66.
|
|
52
|
-
- **`hb-calendar-events` — `calendar-events`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-calendar-events@0.66.
|
|
53
|
-
- **`hb-captcha-google-recaptcha-v2-invisible` — `captcha-google-recaptcha-v2-invisible`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-captcha-google-recaptcha-v2-invisible@0.66.
|
|
54
|
-
- **`hb-card-video` — `card-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-card-video@0.66.
|
|
55
|
-
- **`hb-chartjs` — `chartjs`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-chartjs@0.66.
|
|
56
|
-
- **`hb-checkout` — `checkout`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-checkout@0.66.
|
|
57
|
-
- **`hb-checkout-shopping-cart` — `checkout-shopping-cart`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-checkout-shopping-cart@0.66.
|
|
58
|
-
- **`hb-contact-card` — `contact-card`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-contact-card@0.66.
|
|
59
|
-
- **`hb-contact-item` — `contact-item`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-contact-item@0.66.
|
|
60
|
-
- **`hb-cookie-law-banner` — `cookie-law-banner`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-cookie-law-banner@0.66.
|
|
61
|
-
- **`hb-dashboard-card1` — `dashboard-card1`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dashboard-card1@0.66.
|
|
62
|
-
- **`hb-dashboard-counter-lines` — `dashboard-counter-lines`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dashboard-counter-lines@0.66.
|
|
63
|
-
- **`hb-dashboard-indicator` — `dashboard-indicator`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dashboard-indicator@0.66.
|
|
64
|
-
- **`hb-dialog` — `dialog`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dialog@0.66.
|
|
65
|
-
- **`hb-dialog-loader` — `dialog-loader`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dialog-loader@0.66.
|
|
66
|
-
- **`hb-dialogform` — `dialogform`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dialogform@0.66.
|
|
67
|
-
- **`hb-downloader` — `downloader`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-downloader@0.66.
|
|
68
|
-
- **`hb-dropdown-notifications` — `dropdown-notifications`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dropdown-notifications@0.66.
|
|
69
|
-
- **`hb-dropdown-simple` — `dropdown-simple`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dropdown-simple@0.66.
|
|
70
|
-
- **`hb-editor-video` — `editor-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-editor-video@0.66.
|
|
71
|
-
- **`hb-faq-component` — `faq-component`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-faq-component@0.66.
|
|
72
|
-
- **`hb-footer` — `footer`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-footer@0.66.
|
|
73
|
-
- **`hb-form` — `form`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-form@0.66.
|
|
74
|
-
- **`hb-form-composer` — `form-composer`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-form-composer@0.66.
|
|
75
|
-
- **`hb-form-contact` — `form-contact`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-form-contact@0.66.
|
|
76
|
-
- **`hb-funnel` — `funnel`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-funnel@0.66.
|
|
77
|
-
- **`hb-gallery-video` — `gallery-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-gallery-video@0.66.
|
|
78
|
-
- **`hb-gauge` — `gauge`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-gauge@0.66.
|
|
79
|
-
- **`hb-input-area` — `input-area`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-area@0.66.
|
|
80
|
-
- **`hb-input-array-objects` — `input-array-objects`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-array-objects@0.66.
|
|
81
|
-
- **`hb-input-array-tags` — `input-array-tags`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-array-tags@0.66.
|
|
82
|
-
- **`hb-input-checkbox` — `input-checkbox`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-checkbox@0.66.
|
|
83
|
-
- **`hb-input-color` — `input-color`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-color@0.66.
|
|
84
|
-
- **`hb-input-coords` — `input-coords`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-coords@0.66.
|
|
85
|
-
- **`hb-input-date` — `input-date`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-date@0.66.
|
|
86
|
-
- **`hb-input-datetime` — `input-datetime`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-datetime@0.66.
|
|
87
|
-
- **`hb-input-email` — `input-email`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-email@0.66.
|
|
88
|
-
- **`hb-input-file` — `input-file`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-file@0.66.
|
|
89
|
-
- **`hb-input-number` — `input-number`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-number@0.66.
|
|
90
|
-
- **`hb-input-radio` — `input-radio`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-radio@0.66.
|
|
91
|
-
- **`hb-input-range` — `input-range`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-range@0.66.
|
|
92
|
-
- **`hb-input-select` — `input-select`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-select@0.66.
|
|
93
|
-
- **`hb-input-text` — `input-text`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-text@0.66.
|
|
94
|
-
- **`hb-json-viewer` — `json-viewer`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-json-viewer@0.66.
|
|
95
|
-
- **`hb-layout` — `layout`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-layout@0.66.
|
|
96
|
-
- **`hb-layout-desktop` — `layout-desktop`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-layout-desktop@0.66.
|
|
97
|
-
- **`hb-layout-mobile` — `layout-mobile`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-layout-mobile@0.66.
|
|
98
|
-
- **`hb-map` — `map`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-map@0.66.
|
|
99
|
-
- **`hb-markdown-viewer` — `markdown-viewer`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-markdown-viewer@0.66.
|
|
100
|
-
- **`hb-matrix-video` — `matrix-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-matrix-video@0.66.
|
|
101
|
-
- **`hb-messages-box` — `messages-box`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-messages-box@0.66.
|
|
102
|
-
- **`hb-messages-list` — `messages-list`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-messages-list@0.66.
|
|
103
|
-
- **`hb-messages-send` — `messages-send`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-messages-send@0.66.
|
|
104
|
-
- **`hb-messages-topics-card` — `messages-topics-card`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-messages-topics-card@0.66.
|
|
105
|
-
- **`hb-modal-video` — `modal-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-modal-video@0.66.
|
|
106
|
-
- **`hb-navbar` — `navbar`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-navbar@0.66.
|
|
107
|
-
- **`hb-offcanvas` — `offcanvas`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-offcanvas@0.66.
|
|
108
|
-
- **`hb-order-list` — `order-list`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-order-list@0.66.
|
|
109
|
-
- **`hb-pad-joystick` — `pad-joystick`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-pad-joystick@0.66.
|
|
110
|
-
- **`hb-page-checkout` — `page-checkout`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-page-checkout@0.66.
|
|
111
|
-
- **`hb-page-invoice` — `page-invoice`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-page-invoice@0.66.
|
|
112
|
-
- **`hb-paginate` — `paginate`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-paginate@0.66.
|
|
113
|
-
- **`hb-paragraps-around-image` — `paragraps-around-image`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-paragraps-around-image@0.66.
|
|
114
|
-
- **`hb-paragraps-around-image-cell` — `paragraps-around-image-cell`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-paragraps-around-image-cell@0.66.
|
|
115
|
-
- **`hb-payment-paypal` — `payment-paypal`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-payment-paypal@0.66.
|
|
116
|
-
- **`hb-player-input-streaming` — `player-input-streaming`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-player-input-streaming@0.66.
|
|
117
|
-
- **`hb-player-live` — `player-live`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-player-live@0.66.
|
|
118
|
-
- **`hb-player-live-camera-ptz` — `player-live-camera-ptz`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-player-live-camera-ptz@0.66.
|
|
119
|
-
- **`hb-product-comparison` — `product-comparison`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-product-comparison@0.66.
|
|
120
|
-
- **`hb-range-slider` — `range-slider`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-range-slider@0.66.
|
|
121
|
-
- **`hb-searchbar` — `searchbar`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-searchbar@0.66.
|
|
122
|
-
- **`hb-shop-item-cell` — `shop-item-cell`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-shop-item-cell@0.66.
|
|
123
|
-
- **`hb-shop-item-row` — `shop-item-row`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-shop-item-row@0.66.
|
|
124
|
-
- **`hb-sidebar-cards-navigator` — `sidebar-cards-navigator`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-sidebar-cards-navigator@0.66.
|
|
125
|
-
- **`hb-sidebar-desktop` — `sidebar-desktop`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-sidebar-desktop@0.66.
|
|
126
|
-
- **`hb-sidenav-button` — `sidenav-button`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-sidenav-button@0.66.
|
|
127
|
-
- **`hb-sidenav-link` — `sidenav-link`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-sidenav-link@0.66.
|
|
128
|
-
- **`hb-site-contacts-row` — `site-contacts-row`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-site-contacts-row@0.66.
|
|
129
|
-
- **`hb-site-paragraph-with-image` — `site-paragraph-with-image`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-site-paragraph-with-image@0.66.
|
|
130
|
-
- **`hb-site-slideshow` — `site-slideshow`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-site-slideshow@0.66.
|
|
131
|
-
- **`hb-site-slideshow-horizontal` — `site-slideshow-horizontal`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-site-slideshow-horizontal@0.66.
|
|
132
|
-
- **`hb-skeleton-component` — `skeleton-component`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-skeleton-component@0.66.
|
|
133
|
-
- **`hb-stylus-notebook` — `stylus-notebook`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-stylus-notebook@0.66.
|
|
134
|
-
- **`hb-stylus-paper` — `stylus-paper`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-stylus-paper@0.66.
|
|
135
|
-
- **`hb-table` — `table`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-table@0.66.
|
|
136
|
-
- **`hb-terms-doc-templates` — `terms-doc-templates`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-terms-doc-templates@0.66.
|
|
137
|
-
- **`hb-toast` — `toast`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-toast@0.66.
|
|
138
|
-
- **`hb-tooltip` — `tooltip`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-tooltip@0.66.
|
|
139
|
-
- **`hb-uploader` — `uploader`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-uploader@0.66.
|
|
140
|
-
- **`hb-vertical-img-txt-archive` — `vertical-img-txt-archive`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-vertical-img-txt-archive@0.66.
|
|
47
|
+
- **`hb-area-code` — `area-code`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-area-code@0.66.14/README.md) · [same text in this document](#wc-area-code)
|
|
48
|
+
- **`hb-auth` — `auth`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-auth@0.66.14/README.md) · [same text in this document](#wc-auth)
|
|
49
|
+
- **`hb-auth-social-login-button` — `auth-social-login-button`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-auth-social-login-button@0.66.14/README.md) · [same text in this document](#wc-auth-social-login-button)
|
|
50
|
+
- **`hb-banner` — `banner`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-banner@0.66.14/README.md) · [same text in this document](#wc-banner)
|
|
51
|
+
- **`hb-calendar-appointments` — `calendar-appointments`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-calendar-appointments@0.66.14/README.md) · [same text in this document](#wc-calendar-appointments)
|
|
52
|
+
- **`hb-calendar-events` — `calendar-events`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-calendar-events@0.66.14/README.md) · [same text in this document](#wc-calendar-events)
|
|
53
|
+
- **`hb-captcha-google-recaptcha-v2-invisible` — `captcha-google-recaptcha-v2-invisible`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-captcha-google-recaptcha-v2-invisible@0.66.14/README.md) · [same text in this document](#wc-captcha-google-recaptcha-v2-invisible)
|
|
54
|
+
- **`hb-card-video` — `card-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-card-video@0.66.14/README.md) · [same text in this document](#wc-card-video)
|
|
55
|
+
- **`hb-chartjs` — `chartjs`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-chartjs@0.66.14/README.md) · [same text in this document](#wc-chartjs)
|
|
56
|
+
- **`hb-checkout` — `checkout`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-checkout@0.66.14/README.md) · [same text in this document](#wc-checkout)
|
|
57
|
+
- **`hb-checkout-shopping-cart` — `checkout-shopping-cart`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-checkout-shopping-cart@0.66.14/README.md) · [same text in this document](#wc-checkout-shopping-cart)
|
|
58
|
+
- **`hb-contact-card` — `contact-card`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-contact-card@0.66.14/README.md) · [same text in this document](#wc-contact-card)
|
|
59
|
+
- **`hb-contact-item` — `contact-item`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-contact-item@0.66.14/README.md) · [same text in this document](#wc-contact-item)
|
|
60
|
+
- **`hb-cookie-law-banner` — `cookie-law-banner`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-cookie-law-banner@0.66.14/README.md) · [same text in this document](#wc-cookie-law-banner)
|
|
61
|
+
- **`hb-dashboard-card1` — `dashboard-card1`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dashboard-card1@0.66.14/README.md) · [same text in this document](#wc-dashboard-card1)
|
|
62
|
+
- **`hb-dashboard-counter-lines` — `dashboard-counter-lines`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dashboard-counter-lines@0.66.14/README.md) · [same text in this document](#wc-dashboard-counter-lines)
|
|
63
|
+
- **`hb-dashboard-indicator` — `dashboard-indicator`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dashboard-indicator@0.66.14/README.md) · [same text in this document](#wc-dashboard-indicator)
|
|
64
|
+
- **`hb-dialog` — `dialog`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dialog@0.66.14/README.md) · [same text in this document](#wc-dialog)
|
|
65
|
+
- **`hb-dialog-loader` — `dialog-loader`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dialog-loader@0.66.14/README.md) · [same text in this document](#wc-dialog-loader)
|
|
66
|
+
- **`hb-dialogform` — `dialogform`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dialogform@0.66.14/README.md) · [same text in this document](#wc-dialogform)
|
|
67
|
+
- **`hb-downloader` — `downloader`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-downloader@0.66.14/README.md) · [same text in this document](#wc-downloader)
|
|
68
|
+
- **`hb-dropdown-notifications` — `dropdown-notifications`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dropdown-notifications@0.66.14/README.md) · [same text in this document](#wc-dropdown-notifications)
|
|
69
|
+
- **`hb-dropdown-simple` — `dropdown-simple`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-dropdown-simple@0.66.14/README.md) · [same text in this document](#wc-dropdown-simple)
|
|
70
|
+
- **`hb-editor-video` — `editor-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-editor-video@0.66.14/README.md) · [same text in this document](#wc-editor-video)
|
|
71
|
+
- **`hb-faq-component` — `faq-component`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-faq-component@0.66.14/README.md) · [same text in this document](#wc-faq-component)
|
|
72
|
+
- **`hb-footer` — `footer`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-footer@0.66.14/README.md) · [same text in this document](#wc-footer)
|
|
73
|
+
- **`hb-form` — `form`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-form@0.66.14/README.md) · [same text in this document](#wc-form)
|
|
74
|
+
- **`hb-form-composer` — `form-composer`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-form-composer@0.66.14/README.md) · [same text in this document](#wc-form-composer)
|
|
75
|
+
- **`hb-form-contact` — `form-contact`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-form-contact@0.66.14/README.md) · [same text in this document](#wc-form-contact)
|
|
76
|
+
- **`hb-funnel` — `funnel`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-funnel@0.66.14/README.md) · [same text in this document](#wc-funnel)
|
|
77
|
+
- **`hb-gallery-video` — `gallery-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-gallery-video@0.66.14/README.md) · [same text in this document](#wc-gallery-video)
|
|
78
|
+
- **`hb-gauge` — `gauge`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-gauge@0.66.14/README.md) · [same text in this document](#wc-gauge)
|
|
79
|
+
- **`hb-input-area` — `input-area`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-area@0.66.14/README.md) · [same text in this document](#wc-input-area)
|
|
80
|
+
- **`hb-input-array-objects` — `input-array-objects`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-array-objects@0.66.14/README.md) · [same text in this document](#wc-input-array-objects)
|
|
81
|
+
- **`hb-input-array-tags` — `input-array-tags`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-array-tags@0.66.14/README.md) · [same text in this document](#wc-input-array-tags)
|
|
82
|
+
- **`hb-input-checkbox` — `input-checkbox`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-checkbox@0.66.14/README.md) · [same text in this document](#wc-input-checkbox)
|
|
83
|
+
- **`hb-input-color` — `input-color`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-color@0.66.14/README.md) · [same text in this document](#wc-input-color)
|
|
84
|
+
- **`hb-input-coords` — `input-coords`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-coords@0.66.14/README.md) · [same text in this document](#wc-input-coords)
|
|
85
|
+
- **`hb-input-date` — `input-date`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-date@0.66.14/README.md) · [same text in this document](#wc-input-date)
|
|
86
|
+
- **`hb-input-datetime` — `input-datetime`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-datetime@0.66.14/README.md) · [same text in this document](#wc-input-datetime)
|
|
87
|
+
- **`hb-input-email` — `input-email`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-email@0.66.14/README.md) · [same text in this document](#wc-input-email)
|
|
88
|
+
- **`hb-input-file` — `input-file`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-file@0.66.14/README.md) · [same text in this document](#wc-input-file)
|
|
89
|
+
- **`hb-input-number` — `input-number`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-number@0.66.14/README.md) · [same text in this document](#wc-input-number)
|
|
90
|
+
- **`hb-input-radio` — `input-radio`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-radio@0.66.14/README.md) · [same text in this document](#wc-input-radio)
|
|
91
|
+
- **`hb-input-range` — `input-range`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-range@0.66.14/README.md) · [same text in this document](#wc-input-range)
|
|
92
|
+
- **`hb-input-select` — `input-select`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-select@0.66.14/README.md) · [same text in this document](#wc-input-select)
|
|
93
|
+
- **`hb-input-text` — `input-text`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-input-text@0.66.14/README.md) · [same text in this document](#wc-input-text)
|
|
94
|
+
- **`hb-json-viewer` — `json-viewer`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-json-viewer@0.66.14/README.md) · [same text in this document](#wc-json-viewer)
|
|
95
|
+
- **`hb-layout` — `layout`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-layout@0.66.14/README.md) · [same text in this document](#wc-layout)
|
|
96
|
+
- **`hb-layout-desktop` — `layout-desktop`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-layout-desktop@0.66.14/README.md) · [same text in this document](#wc-layout-desktop)
|
|
97
|
+
- **`hb-layout-mobile` — `layout-mobile`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-layout-mobile@0.66.14/README.md) · [same text in this document](#wc-layout-mobile)
|
|
98
|
+
- **`hb-map` — `map`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-map@0.66.14/README.md) · [same text in this document](#wc-map)
|
|
99
|
+
- **`hb-markdown-viewer` — `markdown-viewer`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-markdown-viewer@0.66.14/README.md) · [same text in this document](#wc-markdown-viewer)
|
|
100
|
+
- **`hb-matrix-video` — `matrix-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-matrix-video@0.66.14/README.md) · [same text in this document](#wc-matrix-video)
|
|
101
|
+
- **`hb-messages-box` — `messages-box`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-messages-box@0.66.14/README.md) · [same text in this document](#wc-messages-box)
|
|
102
|
+
- **`hb-messages-list` — `messages-list`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-messages-list@0.66.14/README.md) · [same text in this document](#wc-messages-list)
|
|
103
|
+
- **`hb-messages-send` — `messages-send`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-messages-send@0.66.14/README.md) · [same text in this document](#wc-messages-send)
|
|
104
|
+
- **`hb-messages-topics-card` — `messages-topics-card`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-messages-topics-card@0.66.14/README.md) · [same text in this document](#wc-messages-topics-card)
|
|
105
|
+
- **`hb-modal-video` — `modal-video`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-modal-video@0.66.14/README.md) · [same text in this document](#wc-modal-video)
|
|
106
|
+
- **`hb-navbar` — `navbar`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-navbar@0.66.14/README.md) · [same text in this document](#wc-navbar)
|
|
107
|
+
- **`hb-offcanvas` — `offcanvas`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-offcanvas@0.66.14/README.md) · [same text in this document](#wc-offcanvas)
|
|
108
|
+
- **`hb-order-list` — `order-list`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-order-list@0.66.14/README.md) · [same text in this document](#wc-order-list)
|
|
109
|
+
- **`hb-pad-joystick` — `pad-joystick`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-pad-joystick@0.66.14/README.md) · [same text in this document](#wc-pad-joystick)
|
|
110
|
+
- **`hb-page-checkout` — `page-checkout`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-page-checkout@0.66.14/README.md) · [same text in this document](#wc-page-checkout)
|
|
111
|
+
- **`hb-page-invoice` — `page-invoice`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-page-invoice@0.66.14/README.md) · [same text in this document](#wc-page-invoice)
|
|
112
|
+
- **`hb-paginate` — `paginate`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-paginate@0.66.14/README.md) · [same text in this document](#wc-paginate)
|
|
113
|
+
- **`hb-paragraps-around-image` — `paragraps-around-image`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-paragraps-around-image@0.66.14/README.md) · [same text in this document](#wc-paragraps-around-image)
|
|
114
|
+
- **`hb-paragraps-around-image-cell` — `paragraps-around-image-cell`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-paragraps-around-image-cell@0.66.14/README.md) · [same text in this document](#wc-paragraps-around-image-cell)
|
|
115
|
+
- **`hb-payment-paypal` — `payment-paypal`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-payment-paypal@0.66.14/README.md) · [same text in this document](#wc-payment-paypal)
|
|
116
|
+
- **`hb-player-input-streaming` — `player-input-streaming`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-player-input-streaming@0.66.14/README.md) · [same text in this document](#wc-player-input-streaming)
|
|
117
|
+
- **`hb-player-live` — `player-live`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-player-live@0.66.14/README.md) · [same text in this document](#wc-player-live)
|
|
118
|
+
- **`hb-player-live-camera-ptz` — `player-live-camera-ptz`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-player-live-camera-ptz@0.66.14/README.md) · [same text in this document](#wc-player-live-camera-ptz)
|
|
119
|
+
- **`hb-product-comparison` — `product-comparison`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-product-comparison@0.66.14/README.md) · [same text in this document](#wc-product-comparison)
|
|
120
|
+
- **`hb-range-slider` — `range-slider`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-range-slider@0.66.14/README.md) · [same text in this document](#wc-range-slider)
|
|
121
|
+
- **`hb-searchbar` — `searchbar`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-searchbar@0.66.14/README.md) · [same text in this document](#wc-searchbar)
|
|
122
|
+
- **`hb-shop-item-cell` — `shop-item-cell`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-shop-item-cell@0.66.14/README.md) · [same text in this document](#wc-shop-item-cell)
|
|
123
|
+
- **`hb-shop-item-row` — `shop-item-row`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-shop-item-row@0.66.14/README.md) · [same text in this document](#wc-shop-item-row)
|
|
124
|
+
- **`hb-sidebar-cards-navigator` — `sidebar-cards-navigator`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-sidebar-cards-navigator@0.66.14/README.md) · [same text in this document](#wc-sidebar-cards-navigator)
|
|
125
|
+
- **`hb-sidebar-desktop` — `sidebar-desktop`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-sidebar-desktop@0.66.14/README.md) · [same text in this document](#wc-sidebar-desktop)
|
|
126
|
+
- **`hb-sidenav-button` — `sidenav-button`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-sidenav-button@0.66.14/README.md) · [same text in this document](#wc-sidenav-button)
|
|
127
|
+
- **`hb-sidenav-link` — `sidenav-link`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-sidenav-link@0.66.14/README.md) · [same text in this document](#wc-sidenav-link)
|
|
128
|
+
- **`hb-site-contacts-row` — `site-contacts-row`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-site-contacts-row@0.66.14/README.md) · [same text in this document](#wc-site-contacts-row)
|
|
129
|
+
- **`hb-site-paragraph-with-image` — `site-paragraph-with-image`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-site-paragraph-with-image@0.66.14/README.md) · [same text in this document](#wc-site-paragraph-with-image)
|
|
130
|
+
- **`hb-site-slideshow` — `site-slideshow`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-site-slideshow@0.66.14/README.md) · [same text in this document](#wc-site-slideshow)
|
|
131
|
+
- **`hb-site-slideshow-horizontal` — `site-slideshow-horizontal`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-site-slideshow-horizontal@0.66.14/README.md) · [same text in this document](#wc-site-slideshow-horizontal)
|
|
132
|
+
- **`hb-skeleton-component` — `skeleton-component`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-skeleton-component@0.66.14/README.md) · [same text in this document](#wc-skeleton-component)
|
|
133
|
+
- **`hb-stylus-notebook` — `stylus-notebook`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-stylus-notebook@0.66.14/README.md) · [same text in this document](#wc-stylus-notebook)
|
|
134
|
+
- **`hb-stylus-paper` — `stylus-paper`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-stylus-paper@0.66.14/README.md) · [same text in this document](#wc-stylus-paper)
|
|
135
|
+
- **`hb-table` — `table`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-table@0.66.14/README.md) · [same text in this document](#wc-table)
|
|
136
|
+
- **`hb-terms-doc-templates` — `terms-doc-templates`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-terms-doc-templates@0.66.14/README.md) · [same text in this document](#wc-terms-doc-templates)
|
|
137
|
+
- **`hb-toast` — `toast`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-toast@0.66.14/README.md) · [same text in this document](#wc-toast)
|
|
138
|
+
- **`hb-tooltip` — `tooltip`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-tooltip@0.66.14/README.md) · [same text in this document](#wc-tooltip)
|
|
139
|
+
- **`hb-uploader` — `uploader`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-uploader@0.66.14/README.md) · [same text in this document](#wc-uploader)
|
|
140
|
+
- **`hb-vertical-img-txt-archive` — `vertical-img-txt-archive`** — [README on jsDelivr](https://cdn.jsdelivr.net/npm/@htmlbricks/hb-vertical-img-txt-archive@0.66.14/README.md) · [same text in this document](#wc-vertical-img-txt-archive)
|
|
141
141
|
|
|
142
142
|
---
|
|
143
143
|
|
|
@@ -3325,6 +3325,8 @@ None declared.
|
|
|
3325
3325
|
|
|
3326
3326
|
Pagination bar with first/prev/next/last and nearby page buttons, optional “showing X–Y of total” text, configurable page-size input or select, and optional sort field and direction controls with i18n labels.
|
|
3327
3327
|
|
|
3328
|
+
When **`is_loading`** is enabled (`"yes"` / `"true"` or boolean), interactive controls are replaced by compact **Bootstrap placeholder** skeletons (info bar, optional page-size blocks, page “pills”, optional sort blocks). **`hb-table`** forwards **`is_loading`** to **`hb-paginate`** automatically while the table is loading.
|
|
3329
|
+
|
|
3328
3330
|
### Custom element
|
|
3329
3331
|
|
|
3330
3332
|
`hb-paginate`
|
|
@@ -3335,6 +3337,7 @@ Pagination bar with first/prev/next/last and nearby page buttons, optional “sh
|
|
|
3335
3337
|
- `page` (required), `pages` (required): numbers as strings.
|
|
3336
3338
|
- `info` (optional): JSON string — `total`, `size`, `page_size_type` (`number` | `select`), `page_size_options`, `sort_fields`, `sort_by`, `sort_direction`, `sort_disabled`, `sort_direction_disabled`, `sort_strict_direction`, `sort_default_value`, `sort_default_label`.
|
|
3337
3339
|
- `i18nlang` (optional): string — e.g. `en`, `it`.
|
|
3340
|
+
- **`is_loading` (optional):** boolean string (`"yes"` / `"true"`) or boolean — shows placeholder UI instead of buttons and inputs. Skeleton layout mirrors `info` (e.g. page-size placeholders only if `page_size_type` is set; sort placeholders only if `sort_fields` is non-empty).
|
|
3338
3341
|
|
|
3339
3342
|
### Events
|
|
3340
3343
|
|
|
@@ -3344,9 +3347,11 @@ Pagination bar with first/prev/next/last and nearby page buttons, optional “sh
|
|
|
3344
3347
|
|
|
3345
3348
|
### Usage notes
|
|
3346
3349
|
|
|
3347
|
-
- **CSS variables:** `--bs-primary
|
|
3350
|
+
- **CSS variables:** `--bs-primary` (and other Bootstrap theme vars as in `extra/docs.ts`).
|
|
3348
3351
|
- **i18n:** Italian and English in metadata; set `i18nlang` accordingly.
|
|
3349
|
-
-
|
|
3352
|
+
- **Standalone:** you can set **`is_loading`** on **`hb-paginate`** alone when the host fetches totals or page list.
|
|
3353
|
+
- **With `hb-table`:** no need to duplicate the flag on paginate; the table passes it for you.
|
|
3354
|
+
- See `extra/docs.ts` for combined sort + page-size examples and the **`loadingPlaceholder`** example.
|
|
3350
3355
|
|
|
3351
3356
|
### Minimal HTML example
|
|
3352
3357
|
|
|
@@ -3354,6 +3359,17 @@ Pagination bar with first/prev/next/last and nearby page buttons, optional “sh
|
|
|
3354
3359
|
<hb-paginate page="0" pages="5" i18nlang="en"></hb-paginate>
|
|
3355
3360
|
```
|
|
3356
3361
|
|
|
3362
|
+
### Loading example
|
|
3363
|
+
|
|
3364
|
+
```html
|
|
3365
|
+
<hb-paginate
|
|
3366
|
+
page="0"
|
|
3367
|
+
pages="5"
|
|
3368
|
+
is_loading="yes"
|
|
3369
|
+
info='{"total":100,"size":10,"page_size_type":"select","page_size_options":"10,25,50"}'
|
|
3370
|
+
></hb-paginate>
|
|
3371
|
+
```
|
|
3372
|
+
|
|
3357
3373
|
---
|
|
3358
3374
|
|
|
3359
3375
|
<a id="wc-paragraps-around-image"></a>
|
|
@@ -4334,7 +4350,9 @@ Freehand drawing surface with modes (`draw`, `eraser`, `select`), brush `options
|
|
|
4334
4350
|
|
|
4335
4351
|
### What it does
|
|
4336
4352
|
|
|
4337
|
-
Bootstrap-striped data table driven by JSON `headers` and `rows` (`_id` required): column sort, header search (text, enum, date range), formatted values (nested keys, datetime via dayjs), copy-to-clipboard, row highlight and `selectrow` clicks. Global `actions` and per-row `_actions` can open confirm or schema dialogs (`hb-dialog` / `hb-dialogform`). Optional multi-select with `selectactions`, `add_item` slot, and `hb-paginate` for page size, sort sync, and server-style `externalfilter` / `total` workflows.
|
|
4353
|
+
Bootstrap-striped data table driven by JSON `headers` and `rows` (`_id` required): column sort, header search (text, enum, date range), formatted values (nested keys, datetime via dayjs), copy-to-clipboard, row highlight and `selectrow` clicks. Global `actions` and per-row `_actions` can open confirm or schema dialogs (`hb-dialog` / `hb-dialogform`). Optional multi-select with `selectactions`, `add_item` slot, and `hb-paginate` for page size, sort sync, and server-style `externalfilter` / `total` workflows.
|
|
4354
|
+
|
|
4355
|
+
While **`is_loading`** is enabled, the tbody shows Bootstrap **placeholder** skeleton rows (count follows **`size`**, capped at 100), and the same flag is passed to **`hb-paginate`** so the pagination bar shows placeholders too. i18n via `i18nlang`.
|
|
4338
4356
|
|
|
4339
4357
|
### Custom element
|
|
4340
4358
|
|
|
@@ -4345,13 +4363,13 @@ Bootstrap-striped data table driven by JSON `headers` and `rows` (`_id` required
|
|
|
4345
4363
|
- `id` (optional), `style` (optional): strings.
|
|
4346
4364
|
- `rows` (required): JSON string — row objects with `_id` and column keys; optional `_actions`, `_evidenced`.
|
|
4347
4365
|
- `headers` (required): JSON string — `ITableHeader[]` (`label`, `key`, optional `type`, `format`, `search`, `click`, `select`, `nosort`, `sortBy`, `truncateAt`, `copyTxt`, `tooltip`).
|
|
4348
|
-
- `actions` (optional): JSON string — global `IActionButton[]
|
|
4349
|
-
- `selectactions` (optional): JSON string.
|
|
4366
|
+
- `actions` (optional): JSON string — global row `IActionButton[]` (see **Actions** below).
|
|
4367
|
+
- `selectactions` (optional): JSON string — toolbar buttons when multi-select is enabled (different shape from `actions`; see **Multi-select**).
|
|
4350
4368
|
- `selectrow`, `enableselect`, `selected` (optional): strings (selection mode / ids).
|
|
4351
4369
|
- `size`, `page`, `pages`, `total` (optional): numbers as strings for pagination / server totals.
|
|
4352
4370
|
- `externalfilter` (optional): boolean string — host-driven filters.
|
|
4353
4371
|
- `disablepagination` (optional): boolean string.
|
|
4354
|
-
- `add_item` (optional): boolean string — show
|
|
4372
|
+
- `add_item` (optional): boolean string — show the **Add** button (see **Add button** below).
|
|
4355
4373
|
- `i18nlang` (optional): string (`it`, `en`, … per registered i18n).
|
|
4356
4374
|
- `page_size_type` (optional): `"number"` | `"select"`.
|
|
4357
4375
|
- `page_size_options` (optional): comma-separated sizes, e.g. `"10,25,50,100"`.
|
|
@@ -4360,6 +4378,53 @@ Bootstrap-striped data table driven by JSON `headers` and `rows` (`_id` required
|
|
|
4360
4378
|
- `disable_paginate_sort` (optional): boolean string.
|
|
4361
4379
|
- `sort_strict_direction` (optional): boolean string.
|
|
4362
4380
|
- `sort_direction` (optional): string — current sort direction.
|
|
4381
|
+
- **`is_loading` (optional):** boolean string (`"yes"` / `"true"`) or boolean in frameworks — enables loading placeholders in the table body (row count = `size`) and forwards the same state to **`hb-paginate`**.
|
|
4382
|
+
|
|
4383
|
+
### Actions (`actions` and `_actions`)
|
|
4384
|
+
|
|
4385
|
+
Use **`actions`** for a column of buttons that is the same for every row (one set per row, same definitions). Use **`_actions`** on a single row object for buttons only on that row (e.g. variable actions per record). Both use the same **`IActionButton`** shape.
|
|
4386
|
+
|
|
4387
|
+
| Field | Purpose |
|
|
4388
|
+
| --- | --- |
|
|
4389
|
+
| `name` | Stable id for the action; emitted in events as `action`. |
|
|
4390
|
+
| `type` | `"text"` — show `iconOrText` as label; `"icon"` — show a **Bootstrap Icon** (see below). |
|
|
4391
|
+
| `iconOrText` | For `type: "text"`, the visible label. For `type: "icon"`, the **icon name** as on [Bootstrap Icons](https://icons.getbootstrap.com/) **without** the `bi-` prefix (e.g. `pencil`, `trash3`, `github`). The component renders a `<i>` with class `bi-{iconOrText}` (e.g. `bi-pencil`). |
|
|
4392
|
+
| `btnClass` | Optional Bootstrap **button colour / style suffix** after `btn-`. Examples: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`, `link`. If omitted, **text** buttons default to `link`, **icon** buttons default to `light`. The full class is `btn btn-{btnClass}`. |
|
|
4393
|
+
| `disabled` | If true, the control is disabled. |
|
|
4394
|
+
| `confirm` | If set, clicking opens **`hb-dialog`** confirm; on confirm the table emits `tableaction` / related confirm events. |
|
|
4395
|
+
| `edit` | If set (and no `confirm`), clicking opens **`hb-dialogform`** with the given `schema`. |
|
|
4396
|
+
| `tooltip` | Optional; passed to **`hb-tooltip`** for icon buttons. |
|
|
4397
|
+
|
|
4398
|
+
**Behaviour without `confirm` / `edit`:** the table dispatches **`tableaction`** with `{ itemId, action }` where `action` is the button `name`. For **`_actions`** on a row, the same flow applies but the event **`tableCustomActionClick`** is also fired with `{ itemId, action }` so you can distinguish custom per-row actions if needed.
|
|
4399
|
+
|
|
4400
|
+
**Icons:** load Bootstrap Icons CSS in the host page (the component already injects the icons stylesheet in the light DOM head for tooltips; for consistent icon font inside the shadow tree, ensure Bootstrap Icons are available). Icon names must match the Bootstrap Icons set.
|
|
4401
|
+
|
|
4402
|
+
### Multi-select (`enableselect`, `selectactions`)
|
|
4403
|
+
|
|
4404
|
+
- Set **`enableselect`** to `"yes"` / `"true"` and pass **`selectactions`**: an array of `{ name, type, iconOrText }` used for bulk actions on checked rows. **`actiononselected`** fires with `{ key: name, selectedItems }`.
|
|
4405
|
+
- Row checkboxes appear only when **`selectactions`** has entries.
|
|
4406
|
+
|
|
4407
|
+
### Add button (`add_item`)
|
|
4408
|
+
|
|
4409
|
+
Set **`add_item`** to `"yes"` / `"true"` (or boolean `true` in frameworks) to show a primary **Add** control in the toolbar below the table (same **`nav`** as pagination — `part="table-actions"`). It is meant to let the user start creating a **new row**; the table does not insert data by itself.
|
|
4410
|
+
|
|
4411
|
+
- **Visibility:** the button is rendered only when **`enableselect`** is *not* active (multi-select gear mode hides it).
|
|
4412
|
+
- **Click:** dispatches the **`addItem`** custom event with payload **`{ id }`**, where **`id`** is the table’s own **`id`** attribute (empty string if unset). The host should listen for `addItem` and open a form, navigate to a create page, call an API, etc.
|
|
4413
|
+
- **Label / icon:** default content is a Bootstrap **plus** icon (`bi-plus`). Override with the **`add-button-content`** slot if you need text or a different icon.
|
|
4414
|
+
|
|
4415
|
+
```html
|
|
4416
|
+
<hb-table
|
|
4417
|
+
id="my-list"
|
|
4418
|
+
add_item="yes"
|
|
4419
|
+
headers='[{"label":"Title","key":"title"}]'
|
|
4420
|
+
rows='[{"_id":"1","title":"A"}]'
|
|
4421
|
+
></hb-table>
|
|
4422
|
+
<script>
|
|
4423
|
+
document.querySelector("hb-table").addEventListener("addItem", (e) => {
|
|
4424
|
+
console.log("Create new item for table:", e.detail.id); // "my-list"
|
|
4425
|
+
});
|
|
4426
|
+
</script>
|
|
4427
|
+
```
|
|
4363
4428
|
|
|
4364
4429
|
### Events
|
|
4365
4430
|
|
|
@@ -4375,14 +4440,15 @@ Bootstrap-striped data table driven by JSON `headers` and `rows` (`_id` required
|
|
|
4375
4440
|
- `showConfirmModal` / `showConfirmModalForm`: modal visibility payloads with `action` and `detail: { id; show }`.
|
|
4376
4441
|
- `confirmActionModal` / `confirmActionModalForm`: `{ action; id; confirm }`.
|
|
4377
4442
|
- `clipboardCopyText`: `{ text: string }`.
|
|
4378
|
-
-
|
|
4443
|
+
- **`addItem`:** `{ id: string }` — fired when the **Add** button is clicked; `id` is the table `id` attribute (see **Add button**).
|
|
4379
4444
|
|
|
4380
4445
|
### Usage notes
|
|
4381
4446
|
|
|
4382
|
-
- **Slots:** `add-button-content
|
|
4447
|
+
- **Slots:** `add-button-content` (Add button body), `buttons-container` (extra toolbar content).
|
|
4383
4448
|
- **CSS parts:** `table`, `table-actions`, `selected-row`, `common-row`.
|
|
4384
|
-
- **i18n:**
|
|
4385
|
-
-
|
|
4449
|
+
- **i18n:** Italian and English in docs metadata; set `i18nlang` accordingly.
|
|
4450
|
+
- **`hb-paginate`:** embedded when pagination is enabled; receives **`is_loading`** automatically when the table is loading.
|
|
4451
|
+
- See `extra/docs.ts` for Storybook-style examples.
|
|
4386
4452
|
|
|
4387
4453
|
### Minimal HTML example
|
|
4388
4454
|
|
|
@@ -4395,6 +4461,35 @@ Bootstrap-striped data table driven by JSON `headers` and `rows` (`_id` required
|
|
|
4395
4461
|
></hb-table>
|
|
4396
4462
|
```
|
|
4397
4463
|
|
|
4464
|
+
### Loading example
|
|
4465
|
+
|
|
4466
|
+
```html
|
|
4467
|
+
<hb-table
|
|
4468
|
+
is_loading="yes"
|
|
4469
|
+
size="10"
|
|
4470
|
+
headers='[{"label":"Title","key":"title"}]'
|
|
4471
|
+
rows='[]'
|
|
4472
|
+
total="0"
|
|
4473
|
+
page="0"
|
|
4474
|
+
pages="0"
|
|
4475
|
+
></hb-table>
|
|
4476
|
+
```
|
|
4477
|
+
|
|
4478
|
+
### Actions example (global column + Bootstrap icon)
|
|
4479
|
+
|
|
4480
|
+
```html
|
|
4481
|
+
<hb-table
|
|
4482
|
+
headers='[{"label":"Name","key":"name"},{"label":"Tools","key":"tools","type":"actions","nosort":true}]'
|
|
4483
|
+
rows='[{"_id":"1","name":"Alice"}]'
|
|
4484
|
+
actions='[
|
|
4485
|
+
{"name":"edit","type":"icon","iconOrText":"pencil","btnClass":"primary"},
|
|
4486
|
+
{"name":"delete","type":"icon","iconOrText":"trash","btnClass":"danger"}
|
|
4487
|
+
]'
|
|
4488
|
+
></hb-table>
|
|
4489
|
+
```
|
|
4490
|
+
|
|
4491
|
+
Listen for `tableaction` to handle `edit` / `delete` by `event.detail.itemId` and `event.detail.action`.
|
|
4492
|
+
|
|
4398
4493
|
---
|
|
4399
4494
|
|
|
4400
4495
|
<a id="wc-terms-doc-templates"></a>
|