@getflip/swirl-components 0.222.0 → 0.222.1

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 CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2024-08-07T07:29:37",
2
+ "timestamp": "2024-08-07T07:57:42",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.18.1",
@@ -23,7 +23,8 @@ const SwirlShellLayout = class {
23
23
  this.secondaryNavItems = Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='secondary-nav'], [slot='secondary-nav'] swirl-shell-navigation-item"));
24
24
  this.toggleNavItemLabels();
25
25
  };
26
- this.toggleSecondaryNavView = () => {
26
+ this.toggleSecondaryNavView = (event) => {
27
+ event.stopPropagation();
27
28
  if (this.secondaryNavView === "grid") {
28
29
  this.secondaryNavView = "list";
29
30
  }
@@ -33,7 +34,8 @@ const SwirlShellLayout = class {
33
34
  this.setSecondaryNavItemsTiled();
34
35
  localStorage.setItem(SECONDARY_NAVIGATION_VIEW_STORAGE_KEY, String(this.secondaryNavView));
35
36
  };
36
- this.toggleSecondaryNavCollapse = () => {
37
+ this.toggleSecondaryNavCollapse = (event) => {
38
+ event.stopPropagation();
37
39
  this.secondaryNavCollapsed = !this.secondaryNavCollapsed;
38
40
  localStorage.setItem(SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY, String(this.secondaryNavCollapsed));
39
41
  };
@@ -169,22 +171,22 @@ const SwirlShellLayout = class {
169
171
  "shell-layout--navigation-collapsed": this.navigationCollapsed,
170
172
  "shell-layout--sidebar-active": this.sidebarActive,
171
173
  });
172
- return (index.h(index.Host, { key: 'adc9e2fc265a9433423eee24356217b4f092e8b6' }, index.h("div", { key: 'b3730a8f4f0d38758b26064105889e9ac601792a', class: className }, index.h("header", { key: '53b44a20ee908f56478c22ad480c10af8e39207c', class: "shell-layout__header", "data-tauri-drag-region": "true" }, index.h("button", { key: '3e1af2d0750924f10c9249cae89669a23b81f7de', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), index.h("div", { key: 'facbc861dab6ca4ac345d712cc95f0e1e80cf332', class: "shell-layout__header-left" }, index.h("button", { key: 'af58135756e998be3dda22ce984a4a6665e53152', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, index.h("swirl-icon-dock-left", { key: 'bd9e8c166ff79094593a36746b7d76658768f70b', size: 20 }), index.h("swirl-visually-hidden", { key: '7b17513abe295dd3e898f3c972dbbd04e8d8e432' }, this.navigationToggleLabel)), index.h("a", { key: 'b11db23915c0c6e08d5ae73b4e3121b718b1ba60', class: "shell-layout__header-tool", href: "javascript:history.back()" }, index.h("swirl-icon-arrow-back", { key: 'e55bf3c9f653257bc6813cba251e94a56f6809ed', size: 20 }), index.h("swirl-visually-hidden", { key: '1d9ed2b3315d620b53ba186d5c6e4910cb817469' }, this.browserBackButtonLabel)), index.h("a", { key: '0309c1d01ed19133465ce57d38e6566212cd4d2d', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, index.h("swirl-icon-arrow-forward", { key: '8b36cbfbbd95d43c371ec2ae679b2c6cfc9cf9b6', size: 20 }), index.h("swirl-visually-hidden", { key: '0636c9e162db5687f2201f3ecefbd73ab138492e' }, this.browserForwardButtonLabel)), index.h("slot", { key: 'ff204208cfc3d964de19cf34282151231feffca2', name: "left-header-tools" })), index.h("div", { key: '3b67421fadb8ae927b41e8a880673d4231a702d8', class: "shell-layout__logo" }, index.h("slot", { key: '30e035a1e2019df1c8e0c4753986b838d80b2d43', name: "logo" })), index.h("div", { key: '3a820a285768c3a01df5ce3c27c7a6327f99fbfd', class: "shell-layout__header-right" }, index.h("slot", { key: '92eec4f65e57bfa62de2f946488e3dbcc5a55ac5', name: "right-header-tools" }), index.h("button", { key: 'bcb9abe9b026fa5a0bdd8e6a756c87bca571015b', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, index.h("swirl-icon", { key: 'a5c2cfd085fa5e2e562444bd0dafe7e752c437b8', glyph: this.sidebarToggleIcon, size: 20 }), index.h("swirl-visually-hidden", { key: 'bbead2f6466b45151e9b4564bbb8add03b877bb9' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (index.h("swirl-badge", { key: 'fb11e5178a9ff012f644cece32ad6ce517cba230', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
174
+ return (index.h(index.Host, { key: '92965e028660ec4a0dd6532cbbf6af458242897c' }, index.h("div", { key: 'a24a9b68e31b1709e5092b62f3eae8945446abcf', class: className }, index.h("header", { key: '4b87606b0a52c9f9c28a1d5925712f0675ecfeec', class: "shell-layout__header", "data-tauri-drag-region": "true" }, index.h("button", { key: '614f5e4e66262889025dd5b44c662f7c1a8a6c50', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), index.h("div", { key: 'a872ec88ec93df784a9dbc63aaf6cc1a52d2244c', class: "shell-layout__header-left" }, index.h("button", { key: 'e97c75dbbd122728974316673e1330457f19eaf9', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, index.h("swirl-icon-dock-left", { key: '50da43ecf3f912fa36c386a9959efa1d76b80fdb', size: 20 }), index.h("swirl-visually-hidden", { key: 'ce3d6276aae55c79028cd313beb9a7bf221ebf76' }, this.navigationToggleLabel)), index.h("a", { key: '8e3f10495a30c0f15e8fcb7ae9070e1171714b04', class: "shell-layout__header-tool", href: "javascript:history.back()" }, index.h("swirl-icon-arrow-back", { key: '272329fac7f7814609b48539708e16ddc0200dbb', size: 20 }), index.h("swirl-visually-hidden", { key: 'c0120fdec27fe9f2c8cf453e7e04ff5896124cf4' }, this.browserBackButtonLabel)), index.h("a", { key: '264f76c8c3d51124a221ab8f3c704b01c3f1e76d', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, index.h("swirl-icon-arrow-forward", { key: '3d4a49f864035e2ee25603a26167271036510174', size: 20 }), index.h("swirl-visually-hidden", { key: 'f0537898089b1df1dc5fb61ccae3ed34f44836c2' }, this.browserForwardButtonLabel)), index.h("slot", { key: '951e7ea60ff412f97305cb96c1a82598508d5e63', name: "left-header-tools" })), index.h("div", { key: '77c8308a4eca1f53536628df219ccc78613763de', class: "shell-layout__logo" }, index.h("slot", { key: '2b872739a23d0c98804d28af740cf84e8e654ac0', name: "logo" })), index.h("div", { key: '06055b0c3516be3115ca54e700bf0e15c1be369b', class: "shell-layout__header-right" }, index.h("slot", { key: '9654178fe8c8f47fa9b7895fd5239caff720983b', name: "right-header-tools" }), index.h("button", { key: '77d871163d148929b83743e6621824368d2202e8', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, index.h("swirl-icon", { key: '87c5a5e8dfcc32296a7a4b4c69707c055f6677a8', glyph: this.sidebarToggleIcon, size: 20 }), index.h("swirl-visually-hidden", { key: 'c7049d520094643e54598a51a9c80abc9d94f97c' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (index.h("swirl-badge", { key: 'b1ace1f7fd27bccdc61eb00bfcd50989293bdcd6', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
173
175
  ? this.sidebarToggleBadgeAriaLabel
174
- : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), index.h("slot", { key: '99ee33d8b3dff40ce4b534266fbdafc4dabf40d3', name: "avatar" }))), index.h("div", { key: '1e07aec21223b6b1277a1f736305204a9d051c69', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), index.h("nav", { key: '593f2d068ec0dcf1161b7f95474611cd0e68a6ef', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, index.h("div", { key: 'a5c91123dd243bace517da12663747fc3ad71e10', class: "shell-layout__mobile-header" }, index.h("slot", { key: '1294c6603ac3d687cad4d009f28b651d4f57f451', name: "mobile-logo" }), index.h("div", { key: '17e63882a7961b5b4284565d548955ba2d6c56d0', class: "shell-layout__mobile-header-tools" }, index.h("slot", { key: 'c032f2ed1c52472666d62dea4fb2e4d3d31b6be1', name: "mobile-header-tools" }), index.h("button", { key: 'c3dfbf08c35f2725160a2288b25c306efd0fcf1e', class: "shell-layout__header-tool", type: "button" }, index.h("swirl-icon-double-arrow-left", { key: 'b05634fac98129147a4509c4461b48c28ed698f7', size: 20 }), index.h("swirl-visually-hidden", { key: 'b49b592652e0c4377e99934a18d0a81dcbcea55f' }, this.hideMobileNavigationButtonLabel)))), index.h("div", { key: '537391a48cc90659e367cb933c0625ef1b32146e', class: "shell-layout__nav-body" }, index.h("swirl-visually-hidden", { key: 'ba3f245289fada7bb8fc0b5c38d1f1c0a43f667d' }, index.h("span", { key: '7d1808931d93a88dd35746a5df8057f6e5aa46fd', id: "main-navigation-label" }, this.navigationLabel)), index.h("slot", { key: '3a082bac6933f9de6972ec0b69190c5ba6352405', name: "nav", onSlotchange: this.collectNavItems }), index.h("div", { key: 'c70a7ccf4d2408b05a8e74b378f9f32bb28fb6fa', class: "shell-layout__secondary-nav" }, index.h("swirl-separator", { key: '2e961f628c249b66a10121ee936924ff26f272a3', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (index.h("swirl-box", { key: 'a554a1070e79b14aac46bc0c73272071c3cc8866', paddingBlockEnd: "16" }, index.h("swirl-stack", { key: '333b1102a5900d06d5b27c9755e1e65132b248f6', justify: this.navigationCollapsed ? "center" : "space-between", orientation: "horizontal" }, index.h("swirl-button", { key: 'b3c51308bfb1067e6fc34b26e09efac5e8d251ac', hideLabel: this.navigationCollapsed, icon: this.secondaryNavCollapsed
176
+ : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), index.h("slot", { key: '910a55412116b423ba00285441aacd02f2b51e3c', name: "avatar" }))), index.h("div", { key: '2af2fbd8f1d4dbe9aa97a7468cb26136410aae18', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), index.h("nav", { key: '23dd3f877bb001663a3e5e6ec72238a9d8931c43', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, index.h("div", { key: 'e7d0abe5b88f44dff919f3548c649e453c2274ee', class: "shell-layout__mobile-header" }, index.h("slot", { key: '44fe8dfaa3a304f3d7e5afe0d05b033888cb0ed2', name: "mobile-logo" }), index.h("div", { key: '8a2be53ceabc13635f6eabc5d00a8d5527556d9d', class: "shell-layout__mobile-header-tools" }, index.h("slot", { key: '6b048b69b0a63c9d5c769ffb5c2d902702855ea1', name: "mobile-header-tools" }), index.h("button", { key: '1bb84665cc2f97484f814fa1fd92079c21df2ce6', class: "shell-layout__header-tool", type: "button" }, index.h("swirl-icon-double-arrow-left", { key: '37e18ea6fc5dbe368e1c52aac568f12f29599502', size: 20 }), index.h("swirl-visually-hidden", { key: 'b8012fd608401d74760dcf5f18186e2046dc50b3' }, this.hideMobileNavigationButtonLabel)))), index.h("div", { key: 'd1fa96efbfcf0b99e4bf4effe31c6508e035f514', class: "shell-layout__nav-body" }, index.h("swirl-visually-hidden", { key: '6ef8bcf2d8451dc36aa0f16c4ae2e40153bc741c' }, index.h("span", { key: '8257d50c13b224979e538156f91797920c180397', id: "main-navigation-label" }, this.navigationLabel)), index.h("slot", { key: 'b7ea77ecc173179bb4a4263d62409e0500bc7e1f', name: "nav", onSlotchange: this.collectNavItems }), index.h("div", { key: '0f42bd57ceba945d4cba756309a2664bb83796f5', class: "shell-layout__secondary-nav" }, index.h("swirl-separator", { key: 'd93dee747a91a636ff7bb94a6060fdcb4a6e03aa', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (index.h("swirl-box", { key: 'b80aad606656e5e574166a61067ae69291dad2c8', paddingBlockEnd: "16" }, index.h("swirl-stack", { key: '08de7d5a0b1d22661b20b6fbff5786aef51211ba', justify: this.navigationCollapsed ? "center" : "space-between", orientation: "horizontal" }, index.h("swirl-button", { key: '2f1b2e375e92bd392c64ae782ff5c8f9f7dc3a45', hideLabel: this.navigationCollapsed, icon: this.secondaryNavCollapsed
175
177
  ? "<swirl-icon-expand-more></swirl-icon-expand-more>"
176
178
  : "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
177
179
  ? this.secondaryNavExpandLabel
178
180
  : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !this.navigationCollapsed &&
179
- !this.secondaryNavCollapsed && (index.h("swirl-button", { key: '907779e749bf62369d80c8c9ede8b29c1f8875ee', icon: this.secondaryNavView === "grid"
181
+ !this.secondaryNavCollapsed && (index.h("swirl-button", { key: '26db5633d9c235f376451f54be9d6a43387bd9dc', icon: this.secondaryNavView === "grid"
180
182
  ? "<swirl-icon-menu></swirl-icon-menu>"
181
183
  : "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
182
184
  ? this.gridNavLayoutToggleLabel
183
- : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), index.h("div", { key: '63bc109d986d9e6556281f4c32fed5cf0df295bb', class: {
185
+ : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), index.h("div", { key: 'e5e98f4cc25462536f076cea469fdc5ceff80546', class: {
184
186
  "shell-layout__secondary-nav-items": true,
185
187
  "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
186
188
  this.secondaryNavView === "grid",
187
- } }, index.h("slot", { key: 'c80fd6c094acd411b1a3c9ff9f83d3e850926961', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), index.h("main", { key: 'e124d72f598b847a8cdd10c61133cbbd794c7653', class: "shell-layout__main", id: "main-content" }, index.h("slot", { key: '5f36222a496b3d09f8cdd4408d0046a1c7cbdd5c' })), index.h("aside", { key: 'c1230a26362fbefe0b89256f2c66bd45c11ed6ce', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, index.h("div", { key: '661dacd4e864efebb33eaef11542b6c4c38af45d', class: "shell-layout__sidebar-body" }, index.h("div", { key: 'ba3f25fe287f6b99865d9217e2dc0adf9e90dbe5', class: "shell-layout__sidebar-app-bar" }, index.h("slot", { key: '12aa5360f51fcef3b196409d42c2adcfabe6aea6', name: "sidebar-app-bar" })), index.h("div", { key: '82c185521ab9cc78e104fcd39e687bf4e25f7cf6', class: "shell-layout__sidebar-content" }, index.h("slot", { key: '20b78c6bb03c09ddeda88b39bb4e680f63c5a4f1', name: "sidebar" })))))));
189
+ } }, index.h("slot", { key: '15ef5908f4021271eb81bbba6e588025f6c0dfdb', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), index.h("main", { key: '2674b8624a508679d80d906cafae84c9200c13c9', class: "shell-layout__main", id: "main-content" }, index.h("slot", { key: '79b11456e9ba1b2757303b49436c660f8b00004a' })), index.h("aside", { key: '09c4067dba7a8e36581f7a45f1061656134fd2cb', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, index.h("div", { key: '010cb284efba3704c1989d481bd765259d80d1b8', class: "shell-layout__sidebar-body" }, index.h("div", { key: 'db132c6c718b6499130be2fab5696185062fa156', class: "shell-layout__sidebar-app-bar" }, index.h("slot", { key: '7f6411a9d71bcabf9c2cb81d8401caa32545cbe9', name: "sidebar-app-bar" })), index.h("div", { key: 'd7c6f80ab3fcfbfa2e4191002bfee8194a0844e5', class: "shell-layout__sidebar-content" }, index.h("slot", { key: 'eba1265ba878bf6a0fc15f0c27d0637aeebde27e', name: "sidebar" })))))));
188
190
  }
189
191
  get el() { return index.getElement(this); }
190
192
  static get watchers() { return {