@getflip/swirl-components 0.497.0 → 0.498.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 +13 -3
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-tree-navigation-item.cjs.entry.js +7 -5
- package/dist/cjs/swirl-video-thumbnail.cjs.entry.js +1 -1
- package/dist/cjs/swirl-visually-hidden.cjs.entry.js +1 -1
- package/dist/collection/components/swirl-tree-navigation-item/swirl-tree-navigation-item.css +8 -0
- package/dist/collection/components/swirl-tree-navigation-item/swirl-tree-navigation-item.js +10 -4
- package/dist/collection/components/swirl-tree-navigation-item/swirl-tree-navigation-item.stories.js +22 -0
- package/dist/collection/components/swirl-video-thumbnail/swirl-video-thumbnail.js +1 -1
- package/dist/collection/components/swirl-visually-hidden/swirl-visually-hidden.js +1 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-tree-navigation-item.js +1 -1
- package/dist/components/swirl-video-thumbnail.js +1 -1
- package/dist/components/swirl-visually-hidden2.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-tree-navigation-item.entry.js +7 -5
- package/dist/esm/swirl-video-thumbnail.entry.js +1 -1
- package/dist/esm/swirl-visually-hidden.entry.js +1 -1
- package/dist/swirl-components/p-b0eccc6e.entry.js +1 -0
- package/dist/swirl-components/p-ca850cc3.entry.js +1 -0
- package/dist/swirl-components/{p-97d41e9a.entry.js → p-d6a60771.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-tree-navigation-item/swirl-tree-navigation-item.d.ts +4 -0
- package/dist/types/components/swirl-tree-navigation-item/swirl-tree-navigation-item.stories.d.ts +1 -0
- package/package.json +1 -1
- package/dist/swirl-components/p-2f9a47c2.entry.js +0 -1
- package/dist/swirl-components/p-47dd9196.entry.js +0 -1
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var index = require('./index-6VVVqdOB.js');
|
|
4
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
5
5
|
|
|
6
|
-
const swirlTreeNavigationItemCss = () => `:host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-base)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:3rem;padding:0 var(--s-space-12) 0 var(--tree-nav-item-padding, var(--s-space-12));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-base)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-state-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-state-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-state-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(*){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}.tree-navigation-item__is-new-tag{flex-shrink:0}`;
|
|
6
|
+
const swirlTreeNavigationItemCss = () => `:host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-base)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:3rem;padding:0 var(--s-space-12) 0 var(--tree-nav-item-padding, var(--s-space-12));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-base)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-state-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-state-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-state-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8);max-height:var(--s-line-height-sm)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4);opacity:0;transition:opacity 0.3s ease}.tree-navigation-item__link:hover .tree-navigation-item__external-icon,.tree-navigation-item__link:focus-visible .tree-navigation-item__external-icon{opacity:1}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(*){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}.tree-navigation-item__is-new-tag{flex-shrink:0}`;
|
|
7
7
|
|
|
8
8
|
const SwirlTreeNavigationItem = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -15,6 +15,7 @@ const SwirlTreeNavigationItem = class {
|
|
|
15
15
|
this.external = false;
|
|
16
16
|
this.expanded = false;
|
|
17
17
|
this.hasChildren = false;
|
|
18
|
+
this.hasCustomIcon = false;
|
|
18
19
|
this.childrenHeight = "0";
|
|
19
20
|
this.buttonId = `${this.navigationItemId}-button`;
|
|
20
21
|
this.childrenId = `${this.navigationItemId}-children`;
|
|
@@ -52,6 +53,7 @@ const SwirlTreeNavigationItem = class {
|
|
|
52
53
|
};
|
|
53
54
|
}
|
|
54
55
|
componentWillLoad() {
|
|
56
|
+
this.hasCustomIcon = Boolean(this.el.querySelector("[slot='custom-icon']"));
|
|
55
57
|
this.checkForChildren();
|
|
56
58
|
}
|
|
57
59
|
componentDidLoad() {
|
|
@@ -89,14 +91,14 @@ const SwirlTreeNavigationItem = class {
|
|
|
89
91
|
const Tag = isLink ? "a" : "button";
|
|
90
92
|
const linkClassName = index$1.classnames("tree-navigation-item__link", {
|
|
91
93
|
"tree-navigation-item__link--active": this.active,
|
|
92
|
-
"tree-navigation-item__link--has-icon": Boolean(this.icon),
|
|
94
|
+
"tree-navigation-item__link--has-icon": this.hasCustomIcon || Boolean(this.icon),
|
|
93
95
|
});
|
|
94
|
-
return (index.h(index.Host, { key: '
|
|
96
|
+
return (index.h(index.Host, { key: '9d410315d9ced800c379b7d05e08ecb3e51e3814', role: "none" }, index.h("li", { key: 'c0f8691af8bf97eef0716667588fe5ab65b2c0bb', class: {
|
|
95
97
|
"tree-navigation-item": true,
|
|
96
98
|
"tree-navigation-item--expanded": this.expanded,
|
|
97
|
-
}, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, index.h(Tag, { key: '
|
|
99
|
+
}, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, index.h(Tag, { key: '82f023dd4af3ceec7b9f890097320482ce97f3a3', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, index.h("span", { key: 'f3a2e20055bf7ced64f31ca036a3122db78fedc3', class: "tree-navigation-item__content" }, this.hasCustomIcon && (index.h("span", { key: 'b2951e1d5d72b55cae72dd648021651bcd15538d', class: "tree-navigation-item__icon", "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` }, index.h("slot", { key: 'a13949bc1b64dbe719e5a8bf24278f875ac4f814', name: "custom-icon" }))), !this.hasCustomIcon && this.icon && (index.h("swirl-icon", { key: '3eb6fb9721525644d4c364dde958e8571a1a627f', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), index.h("span", { key: '164b0449d9f2112a4d44a7b47a8a906d1599d982', class: "tree-navigation-item__label" }, index.h("span", { key: 'e64fb929e885747c7df166c35109465de8f5e981', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (index.h("span", { key: 'feb686e0c0da93524f7b8b67afceeff986940bd5', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, index.h("swirl-icon-chevron-right", { key: '0e5dcf23065a2b4d395cd247e8c67181771e9777', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (index.h("span", { key: '647dbc1098508387613ec0dbc7cdd5b279af67f3', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, index.h("swirl-icon-open-in-new", { key: '19b8f3c8a2c12448bb1bcf0b1720b0e8e24ddca5', size: 16, role: "img", "aria-label": "External link" })))), this.markAsNew && (index.h("swirl-tag", { key: '65a3fbcf1386227356bf6e278702be28d0b7c880', class: "tree-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel, size: "m", variant: "default" })))), this.hasChildren && (index.h("ul", { key: '4099707c9f4c96c9e2e990f9512c3ff738e1e0c5', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
|
|
98
100
|
height: this.childrenHeight,
|
|
99
|
-
} }, index.h("slot", { key: '
|
|
101
|
+
} }, index.h("slot", { key: '36979963b718cbab4349e2d9f3be492641b18fd6' }))))));
|
|
100
102
|
}
|
|
101
103
|
get el() { return index.getElement(this); }
|
|
102
104
|
static get watchers() { return {
|
|
@@ -10,7 +10,7 @@ const SwirlVideoThumbnail = class {
|
|
|
10
10
|
this.durationLabel = "Duration";
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return (index.h(index.Host, { key: '
|
|
13
|
+
return (index.h(index.Host, { key: '3022d58149ece77aa8b4ea2e64c971429fec80ba' }, index.h("button", { key: '8f8c1cdeccf74471c7d5bfaa2eb40f7e26da68db', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: 'fef51a137116e2f7cb28443ce9039579d94696b4', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: 'f170fe4841f2038b8489b220d7bc24891bce8eda', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: 'cce95ca0d643e74ec1b6b586a18544243ebde8b9' }, this.durationLabel), this.duration)), index.h("svg", { key: '3738ed4000e2bc29f51f049d4e4308c07d086ebb', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '02154d538ed641db69c3807af34a2b12aa67ae52', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
|
|
14
14
|
}
|
|
15
15
|
};
|
|
16
16
|
SwirlVideoThumbnail.style = swirlVideoThumbnailCss();
|
|
@@ -9,7 +9,7 @@ const SwirlVisuallyHidden = class {
|
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (index.h(index.Host, { key: '
|
|
12
|
+
return (index.h(index.Host, { key: '1e62cf11ebbb1134c7176a28e6cf91346e382902' }, index.h("slot", { key: '1dd238b1e1c8c133fdfe48af7327407fbab42b00' })));
|
|
13
13
|
}
|
|
14
14
|
};
|
|
15
15
|
SwirlVisuallyHidden.style = swirlVisuallyHiddenCss();
|
package/dist/collection/components/swirl-tree-navigation-item/swirl-tree-navigation-item.css
CHANGED
|
@@ -86,6 +86,7 @@
|
|
|
86
86
|
display: inline-flex;
|
|
87
87
|
flex-shrink: 0;
|
|
88
88
|
padding-right: var(--s-space-8);
|
|
89
|
+
max-height: var(--s-line-height-sm);
|
|
89
90
|
}
|
|
90
91
|
|
|
91
92
|
.tree-navigation-item__toggle-icon {
|
|
@@ -99,6 +100,13 @@
|
|
|
99
100
|
max-height: 1rem;
|
|
100
101
|
color: var(--s-icon-default);
|
|
101
102
|
margin-left: var(--s-space-4);
|
|
103
|
+
opacity: 0;
|
|
104
|
+
transition: opacity 0.3s ease;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.tree-navigation-item__link:hover .tree-navigation-item__external-icon,
|
|
108
|
+
.tree-navigation-item__link:focus-visible .tree-navigation-item__external-icon {
|
|
109
|
+
opacity: 1;
|
|
102
110
|
}
|
|
103
111
|
|
|
104
112
|
/* Label styles */
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { h, Host, } from "@stencil/core";
|
|
2
2
|
import classnames from "classnames";
|
|
3
|
+
/**
|
|
4
|
+
* @slot custom-icon - Custom icon element that takes precedence over the icon prop.
|
|
5
|
+
*/
|
|
3
6
|
export class SwirlTreeNavigationItem {
|
|
4
7
|
constructor() {
|
|
5
8
|
this.markAsNewLabel = "New";
|
|
@@ -8,6 +11,7 @@ export class SwirlTreeNavigationItem {
|
|
|
8
11
|
this.external = false;
|
|
9
12
|
this.expanded = false;
|
|
10
13
|
this.hasChildren = false;
|
|
14
|
+
this.hasCustomIcon = false;
|
|
11
15
|
this.childrenHeight = "0";
|
|
12
16
|
this.buttonId = `${this.navigationItemId}-button`;
|
|
13
17
|
this.childrenId = `${this.navigationItemId}-children`;
|
|
@@ -45,6 +49,7 @@ export class SwirlTreeNavigationItem {
|
|
|
45
49
|
};
|
|
46
50
|
}
|
|
47
51
|
componentWillLoad() {
|
|
52
|
+
this.hasCustomIcon = Boolean(this.el.querySelector("[slot='custom-icon']"));
|
|
48
53
|
this.checkForChildren();
|
|
49
54
|
}
|
|
50
55
|
componentDidLoad() {
|
|
@@ -82,14 +87,14 @@ export class SwirlTreeNavigationItem {
|
|
|
82
87
|
const Tag = isLink ? "a" : "button";
|
|
83
88
|
const linkClassName = classnames("tree-navigation-item__link", {
|
|
84
89
|
"tree-navigation-item__link--active": this.active,
|
|
85
|
-
"tree-navigation-item__link--has-icon": Boolean(this.icon),
|
|
90
|
+
"tree-navigation-item__link--has-icon": this.hasCustomIcon || Boolean(this.icon),
|
|
86
91
|
});
|
|
87
|
-
return (h(Host, { key: '
|
|
92
|
+
return (h(Host, { key: '9d410315d9ced800c379b7d05e08ecb3e51e3814', role: "none" }, h("li", { key: 'c0f8691af8bf97eef0716667588fe5ab65b2c0bb', class: {
|
|
88
93
|
"tree-navigation-item": true,
|
|
89
94
|
"tree-navigation-item--expanded": this.expanded,
|
|
90
|
-
}, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: '
|
|
95
|
+
}, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: '82f023dd4af3ceec7b9f890097320482ce97f3a3', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, h("span", { key: 'f3a2e20055bf7ced64f31ca036a3122db78fedc3', class: "tree-navigation-item__content" }, this.hasCustomIcon && (h("span", { key: 'b2951e1d5d72b55cae72dd648021651bcd15538d', class: "tree-navigation-item__icon", "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` }, h("slot", { key: 'a13949bc1b64dbe719e5a8bf24278f875ac4f814', name: "custom-icon" }))), !this.hasCustomIcon && this.icon && (h("swirl-icon", { key: '3eb6fb9721525644d4c364dde958e8571a1a627f', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '164b0449d9f2112a4d44a7b47a8a906d1599d982', class: "tree-navigation-item__label" }, h("span", { key: 'e64fb929e885747c7df166c35109465de8f5e981', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: 'feb686e0c0da93524f7b8b67afceeff986940bd5', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '0e5dcf23065a2b4d395cd247e8c67181771e9777', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '647dbc1098508387613ec0dbc7cdd5b279af67f3', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '19b8f3c8a2c12448bb1bcf0b1720b0e8e24ddca5', size: 16, role: "img", "aria-label": "External link" })))), this.markAsNew && (h("swirl-tag", { key: '65a3fbcf1386227356bf6e278702be28d0b7c880', class: "tree-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel, size: "m", variant: "default" })))), this.hasChildren && (h("ul", { key: '4099707c9f4c96c9e2e990f9512c3ff738e1e0c5', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
|
|
91
96
|
height: this.childrenHeight,
|
|
92
|
-
} }, h("slot", { key: '
|
|
97
|
+
} }, h("slot", { key: '36979963b718cbab4349e2d9f3be492641b18fd6' }))))));
|
|
93
98
|
}
|
|
94
99
|
static get is() { return "swirl-tree-navigation-item"; }
|
|
95
100
|
static get encapsulation() { return "shadow"; }
|
|
@@ -324,6 +329,7 @@ export class SwirlTreeNavigationItem {
|
|
|
324
329
|
return {
|
|
325
330
|
"expanded": {},
|
|
326
331
|
"hasChildren": {},
|
|
332
|
+
"hasCustomIcon": {},
|
|
327
333
|
"childrenHeight": {}
|
|
328
334
|
};
|
|
329
335
|
}
|
package/dist/collection/components/swirl-tree-navigation-item/swirl-tree-navigation-item.stories.js
CHANGED
|
@@ -19,3 +19,25 @@ SwirlTreeNavigationItem.args = {
|
|
|
19
19
|
icon: "file",
|
|
20
20
|
label: "Label",
|
|
21
21
|
};
|
|
22
|
+
const CustomIconTemplate = (args) => {
|
|
23
|
+
const element = generateStoryElement("swirl-tree-navigation-item", args);
|
|
24
|
+
const icon = document.createElement("div");
|
|
25
|
+
icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
|
|
26
|
+
<path d="M15 19V18H13C12.45 18 11.9792 17.8042 11.5875 17.4125C11.1958 17.0208 11 16.55 11 16V8H9V9C9 9.55 8.80417 10.0208 8.4125 10.4125C8.02083 10.8042 7.55 11 7 11H4C3.45 11 2.97917 10.8042 2.5875 10.4125C2.19583 10.0208 2 9.55 2 9V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H7C7.55 3 8.02083 3.19583 8.4125 3.5875C8.80417 3.97917 9 4.45 9 5V6H15V5C15 4.45 15.1958 3.97917 15.5875 3.5875C15.9792 3.19583 16.45 3 17 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V9C22 9.55 21.8042 10.0208 21.4125 10.4125C21.0208 10.8042 20.55 11 20 11H17C16.45 11 15.9792 10.8042 15.5875 10.4125C15.1958 10.0208 15 9.55 15 9V8H13V16H15V15C15 14.45 15.1958 13.9792 15.5875 13.5875C15.9792 13.1958 16.45 13 17 13H20C20.55 13 21.0208 13.1958 21.4125 13.5875C21.8042 13.9792 22 14.45 22 15V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H17C16.45 21 15.9792 20.8042 15.5875 20.4125C15.1958 20.0208 15 19.55 15 19ZM17 9H20V5H17V9ZM17 19H20V15H17V19ZM4 9H7V5H4V9Z" fill="url(#paint0_linear_1684_11108)"/>
|
|
27
|
+
<defs>
|
|
28
|
+
<linearGradient id="paint0_linear_1684_11108" x1="19.5" y1="18.5" x2="6" y2="5.5" gradientUnits="userSpaceOnUse">
|
|
29
|
+
<stop offset="0.225962" stop-color="#1D79FF"/>
|
|
30
|
+
<stop offset="1" stop-color="#65DB91"/>
|
|
31
|
+
</linearGradient>
|
|
32
|
+
</defs>
|
|
33
|
+
</svg>`;
|
|
34
|
+
icon.setAttribute("slot", "custom-icon");
|
|
35
|
+
element.appendChild(icon);
|
|
36
|
+
return element;
|
|
37
|
+
};
|
|
38
|
+
export const WithCustomIcon = CustomIconTemplate.bind({});
|
|
39
|
+
WithCustomIcon.args = {
|
|
40
|
+
icon: "file",
|
|
41
|
+
label: "Nav item with custom icon",
|
|
42
|
+
navigationItemId: "custom-icon-item",
|
|
43
|
+
};
|
|
@@ -4,7 +4,7 @@ export class SwirlVideoThumbnail {
|
|
|
4
4
|
this.durationLabel = "Duration";
|
|
5
5
|
}
|
|
6
6
|
render() {
|
|
7
|
-
return (h(Host, { key: '
|
|
7
|
+
return (h(Host, { key: '3022d58149ece77aa8b4ea2e64c971429fec80ba' }, h("button", { key: '8f8c1cdeccf74471c7d5bfaa2eb40f7e26da68db', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'fef51a137116e2f7cb28443ce9039579d94696b4', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'f170fe4841f2038b8489b220d7bc24891bce8eda', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'cce95ca0d643e74ec1b6b586a18544243ebde8b9' }, this.durationLabel), this.duration)), h("svg", { key: '3738ed4000e2bc29f51f049d4e4308c07d086ebb', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '02154d538ed641db69c3807af34a2b12aa67ae52', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
|
|
8
8
|
}
|
|
9
9
|
static get is() { return "swirl-video-thumbnail"; }
|
|
10
10
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
export class SwirlVisuallyHidden {
|
|
3
3
|
render() {
|
|
4
|
-
return (h(Host, { key: '
|
|
4
|
+
return (h(Host, { key: '1e62cf11ebbb1134c7176a28e6cf91346e382902' }, h("slot", { key: '1dd238b1e1c8c133fdfe48af7327407fbab42b00' })));
|
|
5
5
|
}
|
|
6
6
|
static get is() { return "swirl-visually-hidden"; }
|
|
7
7
|
static get encapsulation() { return "scoped"; }
|