@getflip/swirl-components 0.176.0 → 0.177.0
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/components.json +9 -1
- package/dist/cjs/swirl-description-list-item.cjs.entry.js +4 -2
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-description-list/swirl-description-list.stories.js +3 -0
- package/dist/collection/components/swirl-description-list-item/swirl-description-list-item.css +17 -4
- package/dist/collection/components/swirl-description-list-item/swirl-description-list-item.js +4 -1
- package/dist/collection/components/swirl-description-list-item/swirl-description-list-item.spec.js +11 -6
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-description-list-item.js +4 -2
- package/dist/esm/swirl-description-list-item.entry.js +4 -2
- package/dist/swirl-components/p-d5c10d1e.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-description-list-item/swirl-description-list-item.d.ts +1 -0
- package/package.json +1 -1
- package/dist/swirl-components/p-85eeb993.entry.js +0 -1
package/components.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2024-03-
|
|
2
|
+
"timestamp": "2024-03-26T08:32:38",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "3.3.1",
|
|
@@ -6375,6 +6375,10 @@
|
|
|
6375
6375
|
{
|
|
6376
6376
|
"name": "slot",
|
|
6377
6377
|
"text": "tools - Optional tools to be displayed on the right side of the item"
|
|
6378
|
+
},
|
|
6379
|
+
{
|
|
6380
|
+
"name": "slot",
|
|
6381
|
+
"text": "additional-content - Optional additional content displayed at the bottom of the item"
|
|
6378
6382
|
}
|
|
6379
6383
|
],
|
|
6380
6384
|
"usage": {},
|
|
@@ -6450,6 +6454,10 @@
|
|
|
6450
6454
|
"listeners": [],
|
|
6451
6455
|
"styles": [],
|
|
6452
6456
|
"slots": [
|
|
6457
|
+
{
|
|
6458
|
+
"name": "additional-content",
|
|
6459
|
+
"docs": "Optional additional content displayed at the bottom of the item"
|
|
6460
|
+
},
|
|
6453
6461
|
{
|
|
6454
6462
|
"name": "slot",
|
|
6455
6463
|
"docs": "The description"
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-1de6abbd.js');
|
|
6
6
|
const index$1 = require('./index-2ddd0598.js');
|
|
7
7
|
|
|
8
|
-
const swirlDescriptionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.description-list-
|
|
8
|
+
const swirlDescriptionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.description-list-item__inner{display:flex;max-width:100%;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);align-items:flex-start;color:var(--s-text-default);line-height:var(--s-line-height-base);justfiy-content:space-between;gap:var(--s-space-16)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.description-list-item__inner{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.description-list-item--bordered{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.description-list-item:not(.description-list-item--has-tools) .description-list-item__tools{display:none}.description-list-item:not(.description-list-item--has-additional-content) .description-list-item__additional-content{display:none}.description-list-item__text-container{flex-grow:1}.description-list-item__term{display:block;margin-bottom:var(--s-space-4);font-weight:var(--s-font-weight-semibold);overflow-wrap:break-word}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.description-list-item__term{margin-bottom:var(--s-space-2)}}.description-list-item__tooltip{display:inline-flex;margin-left:var(--s-space-4);vertical-align:middle}.description-list-item__description{display:block;max-width:40rem;margin:0;overflow-wrap:break-word}.description-list-item__tools{display:flex;min-height:2.625rem;flex-shrink:0;align-items:center}.description-list-item__additional-content{padding-bottom:var(--s-space-8);flex-basis:100%;flex-shrink:0}";
|
|
9
9
|
|
|
10
10
|
const SwirlDescriptionListItem = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -17,11 +17,13 @@ const SwirlDescriptionListItem = class {
|
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
19
|
const hasTools = Boolean(this.el.querySelector('[slot="tools"]'));
|
|
20
|
+
const hasAdditionalContent = Boolean(this.el.querySelector('[slot="additional-content"]'));
|
|
20
21
|
const className = index$1.classnames("description-list-item", {
|
|
21
22
|
"description-list-item--bordered": this.bordered,
|
|
23
|
+
"description-list-item--has-additional-content": hasAdditionalContent,
|
|
22
24
|
"description-list-item--has-tools": hasTools,
|
|
23
25
|
});
|
|
24
|
-
return (index.h(index.Host, { role: "listitem" }, index.h("div", { class: className, part: "description-list-item", role: "group" }, index.h("div", { class: "description-list-item__text-container" }, index.h("div", { class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (index.h("span", { class: "description-list-item__tooltip" }, index.h("swirl-tooltip", { content: this.tooltip, position: "right" }, index.h("swirl-icon-info", { size: 16, tabIndex: 0 }))))), index.h("div", { style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, index.h("slot", null))), index.h("div", { class: "description-list-item__tools" }, index.h("slot", { name: "tools" })))));
|
|
26
|
+
return (index.h(index.Host, { role: "listitem" }, index.h("div", { class: className, part: "description-list-item", role: "group" }, index.h("div", { class: "description-list-item__inner" }, index.h("div", { class: "description-list-item__text-container" }, index.h("div", { class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (index.h("span", { class: "description-list-item__tooltip" }, index.h("swirl-tooltip", { content: this.tooltip, position: "right" }, index.h("swirl-icon-info", { size: 16, tabIndex: 0 }))))), index.h("div", { style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, index.h("slot", null))), index.h("div", { class: "description-list-item__tools" }, index.h("slot", { name: "tools" }))), index.h("div", { class: "description-list-item__additional-content" }, index.h("slot", { name: "additional-content" })))));
|
|
25
27
|
}
|
|
26
28
|
get el() { return index.getElement(this); }
|
|
27
29
|
};
|