@htmlbricks/hb-paragraps-around-image 0.71.36 → 0.71.37
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/README.md +15 -14
- package/main.iife.js +1 -1
- package/main.iife.js.map +1 -1
- package/manifest.json +13 -10
- package/package.json +1 -1
- package/types/webcomponent.type.d.json +11 -8
- package/types/webcomponent.type.d.ts +2 -2
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
# hb-paragraps-around-image
|
|
1
|
+
# `hb-paragraps-around-image` — integrator guide
|
|
2
2
|
|
|
3
|
-
**Category:** content · **Tags:** content
|
|
4
|
-
**Package:** `@htmlbricks/hb-paragraps-around-image`
|
|
5
|
-
**Dependency:** nests `hb-paragraps-around-image-cell` (registered at runtime with the same version as this bundle via `wc-js-utils` `addComponent`).
|
|
3
|
+
**Category:** content · **Tags:** content · **Package:** `@htmlbricks/hb-paragraps-around-image`
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
**Dependency:** registers **`hb-paragraps-around-image-cell`** at runtime (`addComponent`, same bundle version).
|
|
6
|
+
|
|
7
|
+
## Summary
|
|
8
8
|
|
|
9
9
|
`hb-paragraps-around-image` is an editorial layout: a **center column image** flanked by **up to six** rich text blocks rendered as `hb-paragraps-around-image-cell` instances. Paragraph data is supplied as a **JSON string**; each cell is capped at **eight lines** of body text (`max_lines="8"` in the implementation).
|
|
10
10
|
|
|
@@ -37,21 +37,22 @@ Each item in the `paragraphs` array matches the `Paragraphs` type:
|
|
|
37
37
|
|
|
38
38
|
Icons rely on **Bootstrap Icons**; the component loads the icon font from a CDN (`<svelte:head>` in the implementation, plus a font import in `styles/webcomponent.scss`).
|
|
39
39
|
|
|
40
|
-
## Custom element
|
|
40
|
+
## Custom element tag
|
|
41
41
|
|
|
42
|
-
|
|
42
|
+
```html
|
|
43
|
+
<hb-paragraps-around-image …></hb-paragraps-around-image>
|
|
44
|
+
```
|
|
43
45
|
|
|
44
|
-
## Attributes (HTML)
|
|
46
|
+
## Attributes (HTML / reflected props)
|
|
45
47
|
|
|
46
|
-
Web component attributes are **strings
|
|
48
|
+
Web component attributes are **strings** (**snake_case**).
|
|
47
49
|
|
|
48
50
|
| Attribute | Required | Description |
|
|
49
51
|
|-----------|----------|-------------|
|
|
50
|
-
| `img` |
|
|
51
|
-
| `paragraphs` |
|
|
52
|
-
| `id` | No | Optional host
|
|
53
|
-
|
|
54
|
-
The TypeScript `Component` type also includes optional `style`; it is not wired in the current Svelte implementation (commented out), so setting a `style` attribute has no effect until the implementation exposes it.
|
|
52
|
+
| `img` | No | Center column image URL (non-empty **`img`** plus parsed **`paragraphs`** required for the layout to render). |
|
|
53
|
+
| `paragraphs` | No | JSON string or array: paragraph objects (see above). Parsed in an **`$effect`**; invalid JSON is ignored. |
|
|
54
|
+
| `id` | No | Optional host id. |
|
|
55
|
+
| `style` | No | Optional on **`Component`**; host **`style`** still applies in the light DOM. |
|
|
55
56
|
|
|
56
57
|
## Events
|
|
57
58
|
|