npm - @nanoporetech-digital/components - Versions diffs - 4.1.0 → 4.3.0 - Mend

@nanoporetech-digital/components 4.1.0 → 4.3.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.

Files changed (106) hide show

package/dist/cjs/nano-demo.cjs.entry.js CHANGED Viewed

@@ -210,6 +210,53 @@ const Demo = class {
       ecoOrder: false,
       revenueOrder: false,
     };
+    this.columns = [
+      {
+        title: 'Name',
+        prop: 'name',
+        pinned: 'start',
+        rowHeader: true,
+        autoTooltip: true,
+      },
+      {
+        title: 'Status',
+        prop: 'sku',
+        cellTemplate: (_, c) => capitalise(c.cellModel || this.order.status),
+      },
+      {
+        title: 'SKU',
+        prop: 'finalSku',
+      },
+      {
+        title: 'Sales tag',
+        prop: 'salesTag',
+        cellTemplate: (_, c) => c.cellModel || 'None',
+      },
+      {
+        title: 'Requested ship date',
+        prop: 'requestedShippingDate',
+        cellTemplate: (_, c) => mediumDate(c.cellModel) || 'N/A',
+      },
+      {
+        title: 'Quantity',
+        prop: 'quantity',
+      },
+      {
+        title: 'Unit price',
+        prop: 'price',
+        cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),
+      },
+      {
+        title: 'Discount %',
+        prop: 'discountPercentage',
+        cellTemplate: (_, c) => c.cellModel || 0,
+      },
+      {
+        title: 'Line value',
+        prop: 'total',
+        cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),
+      },
+    ];
   }
   lineItemTotal(order) {
     var _a;
@@ -233,53 +280,7 @@ const Demo = class {
             })) : (index.h(index.Fragment, null)),
           ].flat(1);
         },
-      }, columns: [
-        {
-          title: 'Name',
-          prop: 'name',
-          pinned: 'start',
-          rowHeader: true,
-          autoTooltip: true,
-        },
-        {
-          title: 'Status',
-          prop: 'status',
-          cellTemplate: (_, c) => capitalise(c.cellModel || this.order.status),
-        },
-        {
-          title: 'SKU',
-          prop: 'finalSku',
-        },
-        {
-          title: 'Sales tag',
-          prop: 'salesTag',
-          cellTemplate: (_, c) => c.cellModel || 'None',
-        },
-        {
-          title: 'Requested ship date',
-          prop: 'requestedShippingDate',
-          cellTemplate: (_, c) => mediumDate(c.cellModel) || 'N/A',
-        },
-        {
-          title: 'Quantity',
-          prop: 'quantity',
-        },
-        {
-          title: 'Unit price',
-          prop: 'price',
-          cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),
-        },
-        {
-          title: 'Discount %',
-          prop: 'discountPercentage',
-          cellTemplate: (_, c) => c.cellModel || 0,
-        },
-        {
-          title: 'Line value',
-          prop: 'total',
-          cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),
-        },
-      ], rows: this.order.shopOrderLines, caption: `List of order line items found within order ${this.order.orderId}`, showFooter: true, footRender: {
+      }, columns: this.columns, rows: this.order.shopOrderLines, caption: `List of order line items found within order ${this.order.orderId}`, showFooter: true, footRender: {
         pinned: 'bottom',
         template: () => [
           index.h("tr", null, index.h("td", { colSpan: 6 }, "\u00A0"), index.h("th", { scope: "row", class: "tbl__pin nano-tbl__pin--end", colSpan: 3 }, index.h("div", { class: "nano-tbl__cell-content order-lines__total" }, index.h("span", { class: "order-lines__total--label" }, "Sub total:"), index.h("span", { class: "order-lines__total--num" }, currency(this.lineItemTotal(this.order), this.order.currency))))),

package/dist/cjs/nano-demo.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-demo.entry.cjs.js","mappings":"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","names":["h","Host","Fragment"],"sources":["./src/components/demo/demo.tsx"],"sourcesContent":["import {\n Component,\n ComponentInterface,\n Fragment,\n h,\n Host,\n} from '@stencil/core';\n\nfunction capitalise(value: string) {\n if (!value) return '';\n return value.charAt(0).toUpperCase() + value.slice(1);\n}\n\nfunction mediumDate(date: Date) {\n if (!date) return undefined;\n return new Date(date).toLocaleDateString(undefined, {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n });\n}\n\nfunction currency(amount: number = 0, currencyCode: string = 'USD') {\n currencyCode = currencyCode?.toLocaleUpperCase() \|\| 'USD';\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: currencyCode,\n }).format(amount);\n}\n\n@Component({\n tag: 'nano-demo',\n shadow: true,\n styles: /* css */ `\n :host {display: block}\n .child-row {\n opacity: .8;\n font-style: italic;\n }\n `,\n})\nexport class Demo implements ComponentInterface {\n private order = {\n checks: [\n {\n name: 'Compliance',\n external_id: 'CO',\n status: 'complete',\n account_info: {\n name: 'Jeongmin Song',\n email: 'js2957@cornell.edu',\n address_line_1: '930 Campus Road',\n address_line_2: 'Veterinary Medical Center C4 109',\n address_postcode: '14853',\n address_city: 'Ithaca',\n address_region: 'New York',\n address_country: 'US',\n },\n individual_name_compliance_information: {\n table: {\n names: [],\n addresses: [],\n match: false,\n false_positive: null,\n },\n },\n organization_compliance_information: {\n table: {\n names: [],\n addresses: [],\n match: false,\n false_positive: null,\n },\n },\n checks: [\n {\n label: 'Compliance check',\n external_id: 'compliance_check',\n item_type: 'pass/fail/escalate',\n answer: 'pass',\n },\n ],\n further_information: [],\n attachments: [],\n notes: [],\n },\n ],\n orderId: '00886434',\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T16:02:29',\n status: 'Processing',\n subStatus: null,\n currency: 'USD',\n customerPaymentMethod: 'CC-USD',\n paymentPlatform: 'Shop',\n dataAreaId: 'OXUS',\n defaultShippingWarehouse: null,\n deliveryContact: 'Jeongmin Song',\n deliveryMode: null,\n deliveryName: 'Cornell University',\n deliveryTerms: null,\n invoiceAccountNumber: 'C038330',\n orderAccountNumber: 'C038330',\n orderAccountName: 'Cornell University',\n originalLeadTime: null,\n salesDate: '2022-12-09T15:57:50',\n salesName: 'Cornell University',\n salesOrigin: 'Shop',\n salesOriginName: 'Main USD Store View',\n customerReference: '',\n purchaseOrder: null,\n additionalDocuments: [],\n total: 860,\n shippingAmount: 50,\n taxAmount: 0,\n projectId: null,\n deliveryPhoneNumber: '+16072533722',\n invoicePhoneNumber: '+16072533722',\n quoteNumber: null,\n customerType: 'N/A',\n invoiceAccountEmail: 'js2957@cornell.edu',\n partnerReference: null,\n sentToD365: false,\n sentToD365Status: 'unsent',\n orderAccountEmail: 'js2957@cornell.edu',\n controllingAccountNumber: 'C038330',\n controllingAccountEmail: 'js2957@cornell.edu',\n deliveryAddress: {\n street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n city: 'Ithaca',\n postcode: '14853',\n region: 'New York',\n regionCode: 'NY',\n countryCode: 'US',\n },\n invoiceAddress: {\n street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n city: 'Ithaca',\n postcode: '14853',\n region: 'New York',\n regionCode: 'NY',\n countryCode: 'US',\n },\n shopOrderLines: [\n {\n name: 'Flongle Flow Cell (R9.4.1)',\n sku: 'FLO-FLG001',\n quantity: 1,\n price: 810,\n total: 810,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: 'FLO-FLG001',\n productType: 'bundle',\n salesTag: 'FLGExpSP',\n requestedShippingDate: null,\n discount: 0,\n discountPercentage: 0,\n get finalSku() {\n return this.maskSku \|\| this.sku;\n },\n includedItems: [\n {\n name: 'Flongle Flow Cell (R9.4.1)',\n sku: 'FLO-FLG001D',\n quantity: 12,\n price: 66,\n total: 792,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: 'FLO-FLG001',\n productType: 'simple',\n salesTag: 'FLGExpSP',\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n },\n {\n name: 'Flongle Flow Cell Priming Kit',\n sku: 'EXP-FSE001',\n quantity: 1,\n price: 18,\n total: 18,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: '',\n productType: 'simple',\n salesTag: 'FLGExpSP',\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n },\n ],\n },\n {\n name: 'Carriage - Device shipment',\n sku: 'FREIGHT',\n quantity: 1,\n price: 50,\n total: 50,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: '',\n productType: 'virtual',\n salesTag: null,\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n get finalSku() {\n return this.maskSku \|\| this.sku;\n },\n },\n ],\n orderLines: [],\n pickedItems: [],\n packedItems: [],\n trackingNumbers: [],\n trackingUpdates: [],\n ecoOrder: false,\n revenueOrder: false,\n };\n\n private lineItemTotal(order) {\n if (!order \|\| !order.shopOrderLines?.length) return;\n let total = 0;\n order.shopOrderLines.forEach((itm) => {\n if (itm.status !== 'cancelled') total += itm.total;\n });\n return total;\n }\n\n render() {\n return (\n <Host>\n <nano-table\n rowRender={{\n template: (_, c, TableCell) =>\n [\n c.renderedRow,\n c.rowModel.includedItems?.length ? (\n c.rowModel.includedItems?.map((item) => {\n return (\n <tr class=\"child-row\">\n <TableCell header={true}>{item.name}</TableCell>\n <TableCell>\n {capitalise(c.rowModel.status \|\| this.order.status)}\n </TableCell>\n <TableCell>{capitalise(item.sku)}</TableCell>\n <TableCell>{capitalise(item.salesTag)}</TableCell>\n <TableCell>\n {mediumDate(item.requestedShippingDate)}\n </TableCell>\n </tr>\n );\n })\n ) : (\n <Fragment />\n ),\n ].flat(1),\n }}\n columns={[\n {\n title: 'Name',\n prop: 'name',\n pinned: 'start',\n rowHeader: true,\n autoTooltip: true,\n },\n {\n title: 'Status',\n prop: 'status',\n cellTemplate: (_, c) =>\n capitalise(c.cellModel \|\| this.order.status),\n },\n {\n title: 'SKU',\n prop: 'finalSku',\n },\n {\n title: 'Sales tag',\n prop: 'salesTag',\n cellTemplate: (_, c) => c.cellModel \|\| 'None',\n },\n {\n title: 'Requested ship date',\n prop: 'requestedShippingDate',\n cellTemplate: (_, c) => mediumDate(c.cellModel) \|\| 'N/A',\n },\n {\n title: 'Quantity',\n prop: 'quantity',\n },\n {\n title: 'Unit price',\n prop: 'price',\n cellTemplate: (_, c) =>\n currency(c.cellModel, this.order.currency),\n },\n {\n title: 'Discount %',\n prop: 'discountPercentage',\n cellTemplate: (_, c) => c.cellModel \|\| 0,\n },\n {\n title: 'Line value',\n prop: 'total',\n cellTemplate: (_, c) =>\n currency(c.cellModel, this.order.currency),\n },\n ]}\n rows={this.order.shopOrderLines}\n caption={`List of order line items found within order ${this.order.orderId}`}\n showFooter={true}\n footRender={{\n pinned: 'bottom',\n template: () => [\n <tr>\n <td colSpan={6}> </td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">Sub total:</span>\n <span class=\"order-lines__total--num\">\n {currency(\n this.lineItemTotal(this.order),\n this.order.currency\n )}\n </span>\n </div>\n </th>\n </tr>,\n <tr>\n <td colSpan={6}> </td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">\n Total order tax:\n </span>\n <span class=\"order-lines__total--num\">\n {currency(this.order.taxAmount, this.order.currency)}\n </span>\n </div>\n </th>\n </tr>,\n <tr>\n <td colSpan={6}> </td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">\n Total on order placement:\n </span>\n <span class=\"order-lines__total--num\">\n {currency(this.order.total, this.order.currency)}\n </span>\n </div>\n </th>\n </tr>,\n ],\n }}\n />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-demo.entry.cjs.js","mappings":"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","names":["h","Host","Fragment"],"sources":["./src/components/demo/demo.tsx"],"sourcesContent":["import {\n Component,\n ComponentInterface,\n Fragment,\n h,\n Host,\n} from '@stencil/core';\nimport { TableTypes } from '../table/table-interface';\n\ndeclare module namespace {\n export interface AccountInfo {\n name: string;\n email: string;\n address_line_1: string;\n address_line_2: string;\n address_postcode: string;\n address_city: string;\n address_region: string;\n address_country: string;\n }\n\n export interface Table {\n names: any[];\n addresses: any[];\n match: boolean;\n false_positive?: any;\n }\n\n export interface IndividualNameComplianceInformation {\n table: Table;\n }\n\n export interface Table2 {\n names: any[];\n addresses: any[];\n match: boolean;\n false_positive?: any;\n }\n\n export interface OrganizationComplianceInformation {\n table: Table2;\n }\n\n export interface Check2 {\n label: string;\n external_id: string;\n item_type: string;\n answer: string;\n }\n\n export interface Check {\n name: string;\n external_id: string;\n status: string;\n account_info: AccountInfo;\n individual_name_compliance_information: IndividualNameComplianceInformation;\n organization_compliance_information: OrganizationComplianceInformation;\n checks: Check2[];\n further_information: any[];\n attachments: any[];\n notes: any[];\n }\n\n export interface DeliveryAddress {\n street: string[];\n city: string;\n postcode: string;\n region: string;\n regionCode: string;\n countryCode: string;\n }\n\n export interface InvoiceAddress {\n street: string[];\n city: string;\n postcode: string;\n region: string;\n regionCode: string;\n countryCode: string;\n }\n\n export interface IncludedItem {\n name: string;\n sku: string;\n quantity: number;\n price: number;\n total: number;\n createdAt: string;\n updatedAt: string;\n maskSku: string;\n productType: string;\n salesTag: string;\n requestedShippingDate: string;\n discount: number;\n discountPercentage: number;\n }\n\n export interface ShopOrderLine {\n name: string;\n sku: string;\n quantity: number;\n price: number;\n total: number;\n createdAt: string;\n updatedAt: string;\n maskSku: string;\n productType: string;\n salesTag: string;\n requestedShippingDate?: string;\n discount: number;\n discountPercentage: number;\n includedItems?: IncludedItem[];\n finalSku: string;\n }\n\n export interface RootObject {\n checks: Check[];\n orderId: string;\n createdAt: string;\n updatedAt: string;\n status: string;\n subStatus?: any;\n currency: string;\n customerPaymentMethod: string;\n paymentPlatform: string;\n dataAreaId: string;\n defaultShippingWarehouse?: any;\n deliveryContact: string;\n deliveryMode?: any;\n deliveryName: string;\n deliveryTerms?: any;\n invoiceAccountNumber: string;\n orderAccountNumber: string;\n orderAccountName: string;\n originalLeadTime?: any;\n salesDate: string;\n salesName: string;\n salesOrigin: string;\n salesOriginName: string;\n customerReference: string;\n purchaseOrder?: any;\n additionalDocuments: any[];\n total: number;\n shippingAmount: number;\n taxAmount: number;\n projectId?: any;\n deliveryPhoneNumber: string;\n invoicePhoneNumber: string;\n quoteNumber?: any;\n customerType: string;\n invoiceAccountEmail: string;\n partnerReference?: any;\n sentToD365: boolean;\n sentToD365Status: string;\n orderAccountEmail: string;\n controllingAccountNumber: string;\n controllingAccountEmail: string;\n deliveryAddress: DeliveryAddress;\n invoiceAddress: InvoiceAddress;\n shopOrderLines: ShopOrderLine[];\n orderLines: any[];\n pickedItems: any[];\n packedItems: any[];\n trackingNumbers: any[];\n trackingUpdates: any[];\n ecoOrder: boolean;\n revenueOrder: boolean;\n }\n}\n\nfunction capitalise(value: string) {\n if (!value) return '';\n return value.charAt(0).toUpperCase() + value.slice(1);\n}\n\nfunction mediumDate(date: Date) {\n if (!date) return undefined;\n return new Date(date).toLocaleDateString(undefined, {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n });\n}\n\nfunction currency(amount: number = 0, currencyCode: string = 'USD') {\n currencyCode = currencyCode?.toLocaleUpperCase() \|\| 'USD';\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: currencyCode,\n }).format(amount);\n}\n\n@Component({\n tag: 'nano-demo',\n shadow: true,\n styles: /* css */ `\n :host {display: block}\n .child-row {\n opacity: .8;\n font-style: italic;\n }\n `,\n})\nexport class Demo implements ComponentInterface {\n private order: namespace.RootObject = {\n checks: [\n {\n name: 'Compliance',\n external_id: 'CO',\n status: 'complete',\n account_info: {\n name: 'Jeongmin Song',\n email: 'js2957@cornell.edu',\n address_line_1: '930 Campus Road',\n address_line_2: 'Veterinary Medical Center C4 109',\n address_postcode: '14853',\n address_city: 'Ithaca',\n address_region: 'New York',\n address_country: 'US',\n },\n individual_name_compliance_information: {\n table: {\n names: [],\n addresses: [],\n match: false,\n false_positive: null,\n },\n },\n organization_compliance_information: {\n table: {\n names: [],\n addresses: [],\n match: false,\n false_positive: null,\n },\n },\n checks: [\n {\n label: 'Compliance check',\n external_id: 'compliance_check',\n item_type: 'pass/fail/escalate',\n answer: 'pass',\n },\n ],\n further_information: [],\n attachments: [],\n notes: [],\n },\n ],\n orderId: '00886434',\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T16:02:29',\n status: 'Processing',\n subStatus: null,\n currency: 'USD',\n customerPaymentMethod: 'CC-USD',\n paymentPlatform: 'Shop',\n dataAreaId: 'OXUS',\n defaultShippingWarehouse: null,\n deliveryContact: 'Jeongmin Song',\n deliveryMode: null,\n deliveryName: 'Cornell University',\n deliveryTerms: null,\n invoiceAccountNumber: 'C038330',\n orderAccountNumber: 'C038330',\n orderAccountName: 'Cornell University',\n originalLeadTime: null,\n salesDate: '2022-12-09T15:57:50',\n salesName: 'Cornell University',\n salesOrigin: 'Shop',\n salesOriginName: 'Main USD Store View',\n customerReference: '',\n purchaseOrder: null,\n additionalDocuments: [],\n total: 860,\n shippingAmount: 50,\n taxAmount: 0,\n projectId: null,\n deliveryPhoneNumber: '+16072533722',\n invoicePhoneNumber: '+16072533722',\n quoteNumber: null,\n customerType: 'N/A',\n invoiceAccountEmail: 'js2957@cornell.edu',\n partnerReference: null,\n sentToD365: false,\n sentToD365Status: 'unsent',\n orderAccountEmail: 'js2957@cornell.edu',\n controllingAccountNumber: 'C038330',\n controllingAccountEmail: 'js2957@cornell.edu',\n deliveryAddress: {\n street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n city: 'Ithaca',\n postcode: '14853',\n region: 'New York',\n regionCode: 'NY',\n countryCode: 'US',\n },\n invoiceAddress: {\n street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n city: 'Ithaca',\n postcode: '14853',\n region: 'New York',\n regionCode: 'NY',\n countryCode: 'US',\n },\n shopOrderLines: [\n {\n name: 'Flongle Flow Cell (R9.4.1)',\n sku: 'FLO-FLG001',\n quantity: 1,\n price: 810,\n total: 810,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: 'FLO-FLG001',\n productType: 'bundle',\n salesTag: 'FLGExpSP',\n requestedShippingDate: null,\n discount: 0,\n discountPercentage: 0,\n get finalSku() {\n return this.maskSku \|\| this.sku;\n },\n includedItems: [\n {\n name: 'Flongle Flow Cell (R9.4.1)',\n sku: 'FLO-FLG001D',\n quantity: 12,\n price: 66,\n total: 792,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: 'FLO-FLG001',\n productType: 'simple',\n salesTag: 'FLGExpSP',\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n },\n {\n name: 'Flongle Flow Cell Priming Kit',\n sku: 'EXP-FSE001',\n quantity: 1,\n price: 18,\n total: 18,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: '',\n productType: 'simple',\n salesTag: 'FLGExpSP',\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n },\n ],\n },\n {\n name: 'Carriage - Device shipment',\n sku: 'FREIGHT',\n quantity: 1,\n price: 50,\n total: 50,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: '',\n productType: 'virtual',\n salesTag: null,\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n get finalSku() {\n return this.maskSku \|\| this.sku;\n },\n },\n ],\n orderLines: [],\n pickedItems: [],\n packedItems: [],\n trackingNumbers: [],\n trackingUpdates: [],\n ecoOrder: false,\n revenueOrder: false,\n };\n\n private lineItemTotal(order) {\n if (!order \|\| !order.shopOrderLines?.length) return;\n let total = 0;\n order.shopOrderLines.forEach((itm) => {\n if (itm.status !== 'cancelled') total += itm.total;\n });\n return total;\n }\n\n private columns: TableTypes.NanoTable<namespace.ShopOrderLine>['columns'] = [\n {\n title: 'Name',\n prop: 'name',\n pinned: 'start',\n rowHeader: true,\n autoTooltip: true,\n },\n {\n title: 'Status',\n prop: 'sku',\n cellTemplate: (_, c) => capitalise(c.cellModel \|\| this.order.status),\n },\n {\n title: 'SKU',\n prop: 'finalSku',\n },\n {\n title: 'Sales tag',\n prop: 'salesTag',\n cellTemplate: (_, c) => c.cellModel \|\| 'None',\n },\n {\n title: 'Requested ship date',\n prop: 'requestedShippingDate',\n cellTemplate: (_, c) => mediumDate(c.cellModel) \|\| 'N/A',\n },\n {\n title: 'Quantity',\n prop: 'quantity',\n },\n {\n title: 'Unit price',\n prop: 'price',\n cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),\n },\n {\n title: 'Discount %',\n prop: 'discountPercentage',\n cellTemplate: (_, c) => c.cellModel \|\| 0,\n },\n {\n title: 'Line value',\n prop: 'total',\n cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),\n },\n ];\n\n render() {\n return (\n <Host>\n <nano-table\n rowRender={{\n template: (_, c, TableCell) =>\n [\n c.renderedRow,\n c.rowModel.includedItems?.length ? (\n c.rowModel.includedItems?.map((item) => {\n return (\n <tr class=\"child-row\">\n <TableCell header={true}>{item.name}</TableCell>\n <TableCell>\n {capitalise(c.rowModel.status \|\| this.order.status)}\n </TableCell>\n <TableCell>{capitalise(item.sku)}</TableCell>\n <TableCell>{capitalise(item.salesTag)}</TableCell>\n <TableCell>\n {mediumDate(item.requestedShippingDate)}\n </TableCell>\n </tr>\n );\n })\n ) : (\n <Fragment />\n ),\n ].flat(1),\n }}\n columns={this.columns}\n rows={this.order.shopOrderLines}\n caption={`List of order line items found within order ${this.order.orderId}`}\n showFooter={true}\n footRender={{\n pinned: 'bottom',\n template: () => [\n <tr>\n <td colSpan={6}> </td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">Sub total:</span>\n <span class=\"order-lines__total--num\">\n {currency(\n this.lineItemTotal(this.order),\n this.order.currency\n )}\n </span>\n </div>\n </th>\n </tr>,\n <tr>\n <td colSpan={6}> </td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">\n Total order tax:\n </span>\n <span class=\"order-lines__total--num\">\n {currency(this.order.taxAmount, this.order.currency)}\n </span>\n </div>\n </th>\n </tr>,\n <tr>\n <td colSpan={6}> </td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">\n Total on order placement:\n </span>\n <span class=\"order-lines__total--num\">\n {currency(this.order.total, this.order.currency)}\n </span>\n </div>\n </th>\n </tr>,\n ],\n }}\n />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/nano-details.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-details.entry.cjs.js","mappings":"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","names":["displayTransition","readTask","writeTask","h","Host","createColorClasses"],"sources":["./src/components/details/details.scss?tag=nano-details&encapsulation=shadow","./src/components/details/details.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --padding: Default to 1em;\n\n * @prop --btn-padding: Defaults to var(--padding);\n * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{map.get($colors, offwhite)});\n\n * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n * @prop --content-bg-color: Defaults to transparent;\n * @prop --content-text-color: Defaults to #455556;\n * @prop --content-transition: Defaults to height .2s ease-out;\n\n * @prop --border-width: Defaults to none;\n * @prop --border-color: Defaults to none;\n * @prop --border-style: Defaults to none;\n * @prop --border-radius: Defaults to none;\n * @prop --box-shadow: Defaults to none;\n * @prop --focus-style: Defaults to #{$control-focus-style}\n /\n\n @include text-inherit();\n\n --padding: 1em;\n --btn-padding: var(--padding);\n --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n --btn-bg-color--hover: var(--nano-color-tint, #{map.get($colors, offwhite)});\n --btn-text-color: var(--nano-color-base, #455556);\n --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n --content-bg-color: transparent;\n --content-text-color: #455556;\n --content-transition: height 0.2s ease-out;\n --border-width: none;\n --border-color: none;\n --border-style: none;\n --border-radius: none;\n --box-shadow: none;\n --focus-style: #{$control-focus-style};\n\n display: block;\n border-style: var(--border-style);\n border-width: var(--border-width-dims);\n border-color: var(--border-color);\n border-radius: var(--border-radius-dims);\n box-shadow: var(--box-shadow);\n}\n\n:host(:last-of-type) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n .open .content {\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n }\n}\n\n:host(:first-of-type) {\n --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n --border-radius-dims: var(--border-radius);\n --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n:host(.nano-color) {\n --btn-bg-color: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n --btn-bg-color--open: var(--nano-color-base, #{nano-color(primary, base)});\n --btn-bg-color--hover: var(--nano-color-tint, #{nano-color(primary, tint)});\n --btn-text-color: var(--nano-color-base, #{nano-color(primary, base)});\n --btn-text-color--open:\n var(\n --nano-color-contrast,\n #{nano-color(primary, contrast)}\n );\n --btn-text-color--hover:\n var(\n --nano-color-contrast,\n #{nano-color(primary, contrast)}\n );\n}\n\nbutton {\n @include input-cover;\n\n height: auto;\n padding: var(--btn-padding);\n text-align: inherit;\n position: relative;\n font-size: 1em;\n margin: 0;\n transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n display: flex;\n align-items: center;\n background: var(--btn-bg-color);\n color: var(--btn-text-color);\n border-radius: var(--border-radius-dims);\n\n &:focus {\n box-shadow: var(--focus-style);\n outline: none;\n position: relative;\n z-index: 1;\n }\n\n :hover & {\n background: var(--btn-bg-color--hover);\n color: var(--btn-text-color--hover);\n }\n\n .open & {\n background: var(--btn-bg-color--open);\n color: var(--btn-text-color--open);\n border-end-end-radius: 0;\n border-end-start-radius: 0;\n }\n\n .label {\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n flex: 1;\n display: inline-block;\n }\n\n .icon {\n line-height: 0;\n flex-direction: column;\n justify-content: center;\n display: inline-block;\n color: currentcolor;\n transition: 0.3s ease transform;\n transform-origin: center;\n\n &--start {\n margin-inline: 0 var(--padding);\n margin-block: 0;\n }\n\n &--end {\n margin-inline: var(--padding) 0;\n margin-block: 0;\n }\n\n ::slotted(nano-icon) {\n --color: currentcolor;\n }\n }\n}\n\n.content {\n color: var(--content-text-color);\n background: var(--content-bg-color);\n height: 0;\n overflow: hidden;\n transition: 0.2s ease border-radius;\n outline: none;\n\n .loaded & {\n transition: var(--content-transition), 0.2s ease border-radius;\n }\n\n > {\n opacity: 0;\n transition: opacity 0.2s ease-out;\n\n .open & {\n opacity: 1;\n }\n }\n\n &__area {\n padding: var(--padding);\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Prop,\n h,\n Element,\n Watch,\n Host,\n State,\n writeTask,\n readTask,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils/transitions';\nimport type { Color } from '../../interface';\n\n/*\n A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n /\n/\n @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n * @part button - the main details ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part content - the main content wrapper\n /\n@Component({\n tag: 'nano-details',\n styleUrl: 'details.scss',\n shadow: true,\n})\nexport class Details {\n private hasStartSlot: boolean;\n private hasEndSlot: boolean;\n private slideId = `nano-details-${slideIds++}`;\n private mo?: MutationObserver;\n private ro?: ResizeObserver;\n private contentArea: HTMLDivElement;\n private stateChanging: boolean = false;\n\n @State() isLoading = true;\n\n @Element() private el: HTMLNanoDetailsElement;\n\n private contentEl: HTMLElement;\n\n /\n Button / handle text to be used if no complex markup required.\n * Otherwise use label slot.\n /\n @Prop() label: string = '';\n\n /\n Should item be open on load\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Have no handle - you will need to control the hiding / showing of content with script\n /\n @Prop() noHandle: boolean = false;\n\n /\n Icon slot rotation amount (degrees) on open\n /\n @Prop() iconRotation: number = 90;\n\n /\n Color to use from your application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Emitted when the component opens.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n /\n @Event() nanoOpened: EventEmitter;\n\n /\n Emitted when the component closes.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoClosed: EventEmitter;\n\n @Watch('open')\n toggleClick() {\n this.stateChanging = true;\n if (this.open) this.show();\n else this.hide();\n }\n\n private onKeyDown = (ev: KeyboardEvent) => {\n switch (ev.key) {\n case 'Enter':\n case ' ':\n this.open = !this.open;\n break;\n }\n };\n\n private onMouseDown = () => {\n if (this.stateChanging) return;\n this.open = !this.open;\n };\n\n private hide() {\n this.nanoClosed.emit(this.open);\n displayTransition(this.contentEl, 'is-shown', false).then(\n () => (this.stateChanging = false)\n );\n this.contentEl.style.height = '0px';\n }\n\n private show() {\n this.nanoOpened.emit();\n displayTransition(this.contentEl, 'is-shown', true).then(() => {\n this.stateChanging = false;\n });\n this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n }\n\n private resize() {\n if (\n !this.open \|\|\n !this.contentArea \|\|\n !this.contentEl \|\|\n this.stateChanging\n )\n return;\n readTask(() => {\n if (this.contentArea.scrollHeight > 0) {\n writeTask(() => {\n this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n });\n }\n });\n }\n\n private attachRO() {\n if (this.ro \|\| !this.contentArea) return;\n\n const ro = (this.ro = new ResizeObserver(() => this.resize()));\n ro.observe(this.contentArea);\n }\n\n componentWillLoad() {\n this.hasStartSlot = !!this.el.querySelector('[slot=\"icon-start\"]');\n this.hasEndSlot = !!this.el.querySelector('[slot=\"icon-end\"]');\n setTimeout(() => {\n this.isLoading = false;\n }, 100);\n }\n\n componentDidLoad() {\n if (this.open) {\n // disable animation on start\n setTimeout(() => {\n this.show();\n }, 0);\n }\n this.attachRO();\n }\n\n connectedCallback() {\n const mo = (this.mo = new MutationObserver(() => this.resize()));\n mo.observe(this.el, { childList: true, subtree: true, attributes: false });\n this.attachRO();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <div\n class={{\n open: this.open,\n loaded: !this.isLoading,\n }}\n >\n <button\n onKeyDown={this.onKeyDown}\n onMouseDown={this.onMouseDown}\n onTouchEnd={this.onMouseDown}\n aria-controls={this.slideId}\n aria-expanded={this.open ? 'true' : 'false'}\n style={{ display: this.noHandle ? 'none' : '' }}\n part=\"button\"\n >\n {this.hasStartSlot ? (\n <span\n part=\"icon--start\"\n class=\"icon icon--start\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-start\" />\n </span>\n ) : (\n ''\n )}\n <div class=\"label\" part=\"label\">\n {this.label ? this.label : <slot name=\"label\" />}\n </div>\n {this.hasEndSlot ? (\n <span\n part=\"icon--end\"\n class=\"icon icon--end\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-end\" />\n </span>\n ) : (\n ''\n )}\n </button>\n <div\n class=\"content\"\n ref={(div) => (this.contentEl = div)}\n tabindex=\"-1\"\n id={this.slideId}\n part=\"content\"\n >\n <div ref={(div) => (this.contentArea = div)} class=\"content__area\">\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\nlet slideIds = 0;\n"],"version":3}
1	+ {"file":"nano-details.entry.cjs.js","mappings":"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","names":["displayTransition","readTask","writeTask","h","Host","createColorClasses"],"sources":["./src/components/details/details.scss?tag=nano-details&encapsulation=shadow","./src/components/details/details.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --padding: Default to 1em;\n\n * @prop --btn-padding: Defaults to var(--padding);\n * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{map.get($colors, offwhite)});\n\n * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n * @prop --content-bg-color: Defaults to transparent;\n * @prop --content-text-color: Defaults to #455556;\n * @prop --content-transition: Defaults to height .2s ease-out;\n\n * @prop --border-width: Defaults to none;\n * @prop --border-color: Defaults to none;\n * @prop --border-style: Defaults to none;\n * @prop --border-radius: Defaults to none;\n * @prop --box-shadow: Defaults to none;\n * @prop --focus-style: Defaults to #{$control-focus-style}\n /\n\n @include text-inherit();\n\n --padding: 1em;\n --btn-padding: var(--padding);\n --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n --btn-bg-color--hover: var(--nano-color-tint, #{map.get($colors, offwhite)});\n --btn-text-color: var(--nano-color-base, #455556);\n --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n --content-bg-color: transparent;\n --content-text-color: #455556;\n --content-transition: height 0.2s ease-out;\n --border-width: none;\n --border-color: none;\n --border-style: none;\n --border-radius: none;\n --box-shadow: none;\n --focus-style: #{$control-focus-style};\n\n display: block;\n border-style: var(--border-style);\n border-width: var(--border-width-dims);\n border-color: var(--border-color);\n border-radius: var(--border-radius-dims);\n box-shadow: var(--box-shadow);\n}\n\n:host(:last-of-type) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n .open .content {\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n }\n}\n\n:host(:first-of-type) {\n --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n --border-radius-dims: var(--border-radius);\n --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n:host(.nano-color) {\n --btn-bg-color: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n --btn-bg-color--open: var(--nano-color-base, #{nano-color(primary, base)});\n --btn-bg-color--hover: var(--nano-color-tint, #{nano-color(primary, tint)});\n --btn-text-color: var(--nano-color-base, #{nano-color(primary, base)});\n --btn-text-color--open:\n var(\n --nano-color-contrast,\n #{nano-color(primary, contrast)}\n );\n --btn-text-color--hover:\n var(\n --nano-color-contrast,\n #{nano-color(primary, contrast)}\n );\n}\n\nbutton {\n @include input-cover;\n\n height: auto;\n padding: var(--btn-padding);\n text-align: inherit;\n position: relative;\n font-size: 1em;\n margin: 0;\n transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n display: flex;\n align-items: center;\n background: var(--btn-bg-color);\n color: var(--btn-text-color);\n border-radius: var(--border-radius-dims);\n\n &:focus {\n box-shadow: var(--focus-style);\n outline: none;\n position: relative;\n z-index: 1;\n }\n\n :hover & {\n background: var(--btn-bg-color--hover);\n color: var(--btn-text-color--hover);\n }\n\n .open & {\n background: var(--btn-bg-color--open);\n color: var(--btn-text-color--open);\n border-end-end-radius: 0;\n border-end-start-radius: 0;\n }\n\n .label {\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n flex: 1;\n display: inline-block;\n }\n\n .icon {\n line-height: 0;\n flex-direction: column;\n justify-content: center;\n display: inline-block;\n color: currentcolor;\n transition: 0.3s ease transform;\n transform-origin: center;\n\n &--start {\n margin-inline: 0 var(--padding);\n margin-block: 0;\n }\n\n &--end {\n margin-inline: var(--padding) 0;\n margin-block: 0;\n }\n\n ::slotted(nano-icon) {\n --color: currentcolor;\n }\n }\n}\n\n.content {\n color: var(--content-text-color);\n background: var(--content-bg-color);\n height: 0;\n overflow: hidden;\n transition: 0.2s ease border-radius;\n outline: none;\n\n .loaded & {\n transition: var(--content-transition), 0.2s ease border-radius;\n }\n\n > {\n opacity: 0;\n transition: opacity 0.2s ease-out;\n\n .open & {\n opacity: 1;\n }\n }\n\n &__area {\n padding: var(--padding);\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Prop,\n h,\n Element,\n Watch,\n Host,\n State,\n writeTask,\n readTask,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils/transitions';\nimport type { Color } from '../../interface';\n\n/*\n A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n /\n/\n @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n \n @part button - the main details ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part content - the main content wrapper\n /\n@Component({\n tag: 'nano-details',\n styleUrl: 'details.scss',\n shadow: true,\n})\nexport class Details {\n private hasStartSlot: boolean;\n private hasEndSlot: boolean;\n private slideId = `nano-details-${slideIds++}`;\n private mo?: MutationObserver;\n private ro?: ResizeObserver;\n private contentArea: HTMLDivElement;\n private stateChanging: boolean = false;\n\n @State() isLoading = true;\n\n @Element() private el: HTMLNanoDetailsElement;\n\n private contentEl: HTMLElement;\n\n /\n Button / handle text to be used if no complex markup required.\n * Otherwise use label slot.\n /\n @Prop() label: string = '';\n\n /\n Should item be open on load\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Have no handle - you will need to control the hiding / showing of content with script\n /\n @Prop() noHandle: boolean = false;\n\n /\n Icon slot rotation amount (degrees) on open\n /\n @Prop() iconRotation: number = 90;\n\n /\n Color to use from your application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Emitted when the component opens.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n /\n @Event() nanoOpened: EventEmitter;\n\n /\n Emitted when the component closes.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoClosed: EventEmitter;\n\n @Watch('open')\n toggleClick() {\n this.stateChanging = true;\n if (this.open) this.show();\n else this.hide();\n }\n\n private onKeyDown = (ev: KeyboardEvent) => {\n switch (ev.key) {\n case 'Enter':\n case ' ':\n this.open = !this.open;\n break;\n }\n };\n\n private onMouseDown = () => {\n if (this.stateChanging) return;\n this.open = !this.open;\n };\n\n private hide() {\n this.nanoClosed.emit(this.open);\n displayTransition(this.contentEl, 'is-shown', false).then(\n () => (this.stateChanging = false)\n );\n this.contentEl.style.height = '0px';\n }\n\n private show() {\n this.nanoOpened.emit();\n displayTransition(this.contentEl, 'is-shown', true).then(() => {\n this.stateChanging = false;\n });\n this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n }\n\n private resize() {\n if (\n !this.open \|\|\n !this.contentArea \|\|\n !this.contentEl \|\|\n this.stateChanging\n )\n return;\n readTask(() => {\n if (this.contentArea.scrollHeight > 0) {\n writeTask(() => {\n this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n });\n }\n });\n }\n\n private attachRO() {\n if (this.ro \|\| !this.contentArea) return;\n\n const ro = (this.ro = new ResizeObserver(() => this.resize()));\n ro.observe(this.contentArea);\n }\n\n componentWillLoad() {\n this.hasStartSlot = !!this.el.querySelector('[slot=\"icon-start\"]');\n this.hasEndSlot = !!this.el.querySelector('[slot=\"icon-end\"]');\n setTimeout(() => {\n this.isLoading = false;\n }, 100);\n }\n\n componentDidLoad() {\n if (this.open) {\n // disable animation on start\n setTimeout(() => {\n this.show();\n }, 0);\n }\n this.attachRO();\n }\n\n connectedCallback() {\n const mo = (this.mo = new MutationObserver(() => this.resize()));\n mo.observe(this.el, { childList: true, subtree: true, attributes: false });\n this.attachRO();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <div\n class={{\n open: this.open,\n loaded: !this.isLoading,\n }}\n >\n <button\n onKeyDown={this.onKeyDown}\n onMouseDown={this.onMouseDown}\n onTouchEnd={this.onMouseDown}\n aria-controls={this.slideId}\n aria-expanded={this.open ? 'true' : 'false'}\n style={{ display: this.noHandle ? 'none' : '' }}\n part=\"button\"\n >\n {this.hasStartSlot ? (\n <span\n part=\"icon--start\"\n class=\"icon icon--start\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-start\" />\n </span>\n ) : (\n ''\n )}\n <div class=\"label\" part=\"label\">\n {this.label ? this.label : <slot name=\"label\" />}\n </div>\n {this.hasEndSlot ? (\n <span\n part=\"icon--end\"\n class=\"icon icon--end\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-end\" />\n </span>\n ) : (\n ''\n )}\n </button>\n <div\n class=\"content\"\n ref={(div) => (this.contentEl = div)}\n tabindex=\"-1\"\n id={this.slideId}\n part=\"content\"\n >\n <div ref={(div) => (this.contentArea = div)} class=\"content__area\">\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\nlet slideIds = 0;\n"],"version":3}

package/dist/cjs/nano-global-nav.cjs.entry.js CHANGED Viewed

@@ -53,7 +53,7 @@ async function clientFetch(url, _a = {}) {
   }
 }
-const globalNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.global-nav{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;z-index:var(--nano-layer-index-menubar, 10)}.global-nav button{background:none;color:inherit;border:none}.global-nav .icon-btn{position:relative;background:none;color:inherit;border:none;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}.global-nav .icon-btn nano-icon{width:18px;height:18px}.global-nav ::slotted(nano-nav-item[slot=icon]){--padding-top:9px;--padding-bottom:9px;--padding-start:7px;--padding-end:7px;--display:flex;font-size:18px}.global-nav a{color:inherit;text-decoration:none;white-space:nowrap}.global-nav .nav-links_title{margin:8px 0 3px}.global-nav .nav-links ul{margin:0;padding:0}.global-nav .nav-links li{list-style:none}.global-nav .login-btn{display:flex;align-items:center}.global-nav .menu-btn{padding:9px var(--bar-item-spacing) 9px var(--bar-item-spacing)}.site-content{display:flex;transition:min-height 0.2s ease;position:relative;z-index:auto;align-items:stretch;flex:1}.mask{opacity:0;background:rgba(0, 0, 0, 0.3);position:fixed;inset-inline:0;inset-block-start:0;height:100vh;z-index:-1;transition:transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s;visibility:hidden}.mask.open{opacity:1;transition:z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;z-index:3;visibility:visible}.bars{color:var(--bar-text-color);z-index:var(--nano-layer-index-menubar, 10);position:relative;max-width:100%;min-width:100%;box-shadow:none;transition:0.2s ease box-shadow}[stuck] .bars{box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15)}.bars::before{content:\"\";width:100%;height:100%;z-index:-1;background:var(--bar-background);position:absolute}.main-bar{width:100%;padding-inline:0 var(--bar-item-spacing);padding-block:var(--bar-vertical-padding);display:flex;align-items:center;justify-content:space-between;overflow-x:hidden}.main-bar:focus{outline:none}:host(.ready) .main-bar{overflow-x:visible}.main-bar>*,.main-bar ::slotted(*){transition:opacity 0.2s ease}:host(:not(.ready)) .main-bar>*,:host(:not(.ready)) .main-bar ::slotted(*){opacity:0 !important}:host(.ready) .main-bar>*,:host(.ready) .main-bar ::slotted(*){opacity:1}:host(.resizing) .main-bar>*,:host(.resizing) .main-bar ::slotted(*){opacity:0 !important}.main-bar>*{flex:0 0 auto}.main-bar>* ::slotted(nano-nav-item[slot=icon]){-webkit-margin-start:11px;margin-inline-start:11px}.main-bar>* ::slotted(nano-nav-item),.main-bar>* nano-nav-item{--color-hover:var(--bar-color-focus);--secondary-bg-color:var(--bar-dropdown-bg);--secondary-color:var(--bar-dropdown-text);--bg-color-open:var(--bar-background);--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;text-decoration:none !important}.main-bar .icon-btn{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:6px;margin-inline-start:6px}:host(.threshold-2) .main-bar .icon-btn{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:11px;margin-inline-start:11px}.main-bar .menu-btn.icon-btn{margin:0 !important;-webkit-border-end:1.5px solid var(--bar-color-shade);border-inline-end:1.5px solid var(--bar-color-shade)}.main-bar .logo{height:36px;width:200px;min-width:200px}:host(:not(.threshold-1)) .main-bar .logo{height:30px}.main-bar .logo-link{-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:0;margin-inline-start:0;padding-inline:var(--bar-item-spacing);display:flex;align-items:center;border:none}.main-bar .nav-links{flex:0 0 auto;display:flex;justify-content:space-around}.main-bar .nav-links ul{display:flex;justify-content:space-around}.main-bar .nav-links ::slotted(nano-nav-item),.main-bar .nav-links nano-nav-item{--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;--margin:0 var(--bar-item-spacing)}.main-bar .nav-links--main{justify-content:flex-start;letter-spacing:1.5px;font-weight:600;font-stretch:condensed;text-transform:uppercase;font-size:1.065em;-webkit-margin-end:auto;margin-inline-end:auto}.main-bar .nav-links--main ::slotted(nano-nav-item){--color:var(--bar-text-color);--padding-end:3px;--padding-start:0}.main-bar .nav-links--sub{--color:var(--color, #e2e2e2);-webkit-margin-start:6px;margin-inline-start:6px;justify-content:flex-end}.main-bar .login-btn{display:inline-block;border-radius:4px;background-color:var(--login-button-bg);color:var(--login-button-text);padding:3px 10px;position:relative;inset-inline-start:auto;inset-block-end:auto;margin-inline:11px 0}.main-bar .measure-ele{min-width:1px;display:block;margin:0;padding:0}.sticker-trigger{background:var(--bar-background);width:100%;height:1px;z-index:20;position:relative}.sticker-trigger+.sticker-trigger{display:none}.gn-menu{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:-1;display:none;transition:z-index 0.01s ease 0.2s;height:100vh;width:100vw;overflow-y:auto}:host(.threshold-4) .gn-menu{position:absolute;width:calc(100vw - 20px)}.gn-menu.menu-full-screen{width:100vw !important}.gn-menu_wrap{max-width:92vw;width:335px;background:var(--menu-background);color:var(--menu-text-color);padding:calc(var(--bar-vertical-padding) + 1px) 0 0;box-shadow:0 0 36px 0 rgba(0, 0, 0, 0.8);position:relative;pointer-events:all;-webkit-margin-after:36px;margin-block-end:36px;opacity:0;outline:none;transition:transform 0.2s ease, opacity 0.2s ease}.gn-menu_wrap.has-promotion{padding:var(--menu-padding) 0 0}.gn-menu.open{z-index:var(--nano-layer-index-dropdown, 300);transition:z-index 0.01s ease}.gn-menu.open .gn-menu_wrap{opacity:1;transform:translate3d(0, 0, 0) !important;transition:transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s}.gn-menu_actions{-webkit-padding-end:calc(var(--menu-padding) / 2);padding-inline-end:calc(var(--menu-padding) / 2);display:flex;justify-content:space-between}.gn-menu_actions-counter{background:#d0021b;color:var(--menu-text-color);position:absolute;inset-block-end:4px;inset-inline:auto 0;font-size:9px;height:14px;line-height:14px;width:auto;min-width:14px;border-radius:50%;box-sizing:border-box;text-align:center;text-indent:0}.gn-menu .content-wrap{position:relative;overflow:hidden;transition:0.2s ease min-height;min-height:190px}.gn-menu .content--sub{padding:var(--menu-padding) 0 var(--menu-padding) 7px}.gn-menu .menu-btn{-webkit-margin-end:auto;margin-inline-end:auto}.gn-menu .nav-links{display:flex;flex-wrap:wrap}.gn-menu .nav-links ::slotted(nano-nav-item),.gn-menu .nav-links nano-nav-item{--icon-size:14px;--display:inline-block;--secondary-bg-color:#001a21;--padding-top:10px;--padding-bottom:10px;--padding-end:calc(var(--menu-padding) * 2);--padding-start:calc(var(--menu-padding) + 3px);--color:var(--menu-text-color);--color-hover:var(--menu-title-text);--bg-color-hover:transparent;--bg-color-focus:#002530;--focus-outline:none;width:100%}.gn-menu .nav-links .user-nav{--bg-color:var(--menu-user-panel-bg);--padding-top:9px;--padding-bottom:9px;font-weight:bold;margin:5px 0 0}.gn-menu .nav-links .user-nav ::slotted(nano-nav-item),.gn-menu .nav-links .user-nav nano-nav-item{font-weight:500;--bg-color:transparent}.gn-menu .nav-links .user-nav .content{padding:0;background-color:var(--menu-user-panel-bg)}.gn-menu .nav-links .user-nav .content--sub{padding-inline:var(--menu-padding)}.gn-menu .nav-links .user-nav .back-btn{-webkit-padding-start:var(--menu-padding);padding-inline-start:var(--menu-padding)}.gn-menu .nav-links_title{margin:0 var(--menu-padding) 4px;-webkit-border-after:1px solid var(--menu-hint-color);border-block-end:1px solid var(--menu-hint-color);-webkit-padding-after:8px;padding-block-end:8px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:700}.gn-menu .nav-links_title--sites{-webkit-border-after:none;border-block-end:none}.gn-menu .nav-links-wrap{margin:18px 0}.gn-menu .nav-links-wrap:last-child{-webkit-margin-after:0;margin-block-end:0}.gn-menu .nav-links .back-btn{-webkit-border-before:1px solid var(--menu-hint-color);border-block-start:1px solid var(--menu-hint-color);-webkit-border-after:1px solid var(--menu-hint-color);border-block-end:1px solid var(--menu-hint-color);display:flex;align-items:center;padding:10px 11px 10px 0;width:100%;font-size:12px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:700;cursor:pointer;font-stretch:expanded}.gn-menu .nav-links .back-btn:hover{color:var(--menu-text-color)}.gn-menu .nav-links .back-btn nano-icon{-webkit-margin-end:10px;margin-inline-end:10px;font-size:12px;color:var(--menu-icon-color)}.gn-menu .nav-links--sub{display:flex;flex-wrap:wrap}.gn-menu .nav-links--sub ::slotted(nano-nav-item),.gn-menu .nav-links--sub nano-nav-item{--border-bottom:none;--padding-end:var(--menu-padding);--padding-start:var(--menu-padding);--padding-top:8px;--padding-bottom:8px;margin:0;width:50%;line-height:1.8}.gn-menu .nav-links--sites ::slotted(nano-nav-item),.gn-menu .nav-links--sites nano-nav-item{width:100%}.gn-menu .nav-links .content{padding:8px var(--menu-padding)}.gn-menu .login-btn{padding-inline:7px var(--menu-padding);padding-block:var(--menu-padding)}.gn-menu .login-btn nano-icon{-webkit-margin-start:10px;margin-inline-start:10px}.gn-menu .logout-btn{justify-content:flex-end}.gn-menu .logout-btn a{padding:0 5px}.search-btn::before{content:\"\";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-20px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}.search-btn--open::before{transform:translateZ(0) scaleX(1);opacity:0.7}.search-bar{height:0;overflow:hidden;transition:0.2s ease height;padding:0 var(--bar-item-spacing);outline:none;max-width:45em;-webkit-margin-start:auto;margin-inline-start:auto;}.search-bar .search-widget{margin:0;overflow:inherit;max-width:none;max-height:none;min-width:auto;-webkit-padding-end:0;padding-inline-end:0}.search-bar .search-widget .search-icon--search{display:none}.search-bar .search-widget .search-input{--input-border-width:2px 0 0 0;--input-bg-color:#f3f3f3;--nano-input-border-color:transparent;--nano-input-border-color--focus:var(--bar-color-shade);font-size:1.1875em}.search-bar .search-widget nano-select.search-input{--input-border-width:2px 3px 0 0;--input-bg-color:var(--bar-color-shade);--input-bg-color--focus:#f3f3f3;color:#f3f3f3}.search-bar .search-widget nano-select.search-input.has-focus{color:var(--bar-color-shade)}.search-bar .search-widget .select-input__arrow{font-size:0.75em}.search-bar .search-widget .select__mask.sc-nano-select{line-height:2.35em;min-height:2.35em;-webkit-padding-before:2px;padding-block-start:2px}.search-bar .search-inputs{padding:0;margin:0}.search-bar .search-autocomplete{inset-block-start:100%;width:100%}.search-widget{-webkit-padding-end:var(--bar-item-spacing);padding-inline-end:var(--bar-item-spacing);-webkit-margin-start:var(--bar-item-spacing);margin-inline-start:var(--bar-item-spacing);-webkit-margin-end:auto;margin-inline-end:auto;position:relative;flex:1 1 auto;max-width:500px;min-width:350px;max-height:36px;inset-block-start:-1px}.search-inputs{display:flex;margin:0}.search-inputs input[type=submit]{display:none}.search-autocomplete{position:absolute;inset-block-start:calc(100% + 15px);width:calc(100% - var(--bar-item-spacing));inset-inline-start:0;background:white;border:2px solid var(--bar-color-tint);border-radius:0 0 5px 5px;color:#4a4a4a;-webkit-padding-before:calc(var(--bar-vertical-padding) / 2);padding-block-start:calc(var(--bar-vertical-padding) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:1px;padding-block-end:1px;-webkit-padding-start:0;padding-inline-start:0;z-index:1}.search-autocomplete-hit{padding-block:calc(var(--bar-vertical-padding) / 4);padding-inline:var(--bar-item-spacing);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:start;line-height:1.5;cursor:pointer}.search-autocomplete-hit-scope{color:#a7b0b3;font-weight:600}.search-autocomplete-hit:hover,.search-autocomplete-hit:focus-visible{background-color:#e4e6e8}.search-autocomplete-hit:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.search-autocomplete-hit:focus{outline:none}.search-autocomplete-hit .search__highlight,.search-autocomplete-hit em{font-weight:bold;font-style:normal}.search-autocomplete-hit--no-result:hover,.search-autocomplete-hit--no-result:focus{background:none !important}.search-autocomplete-foot{margin:7px 0 0}.search-autocomplete-submit{background:none;border:none;align-self:normal;padding:9px var(--bar-item-spacing) !important;cursor:pointer;display:flex;align-items:center;color:#007495;justify-content:flex-end;width:100%;text-decoration:underline;-webkit-border-before:1px solid #e8eaea;border-block-start:1px solid #e8eaea}.search-autocomplete-submit:hover,.search-autocomplete-submit:focus{background-color:#e4e6e8}nano-select.search-input{--input-border-width:0 0 2px 0;--input-text-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--padding-end:var(--bar-item-spacing);--nano-input-border-color--focus:black;font-stretch:condensed;font-weight:600;letter-spacing:1.5px;font-size:1.2em;flex:0 1 auto;width:auto;display:flex;align-items:center;flex-direction:column;position:relative;inset-inline-start:1px;text-transform:uppercase}:host(:not(.ready)) nano-select.search-input{overflow:hidden;max-height:1em}nano-select.search-input .down-arrow{font-size:0.65em}nano-input.search-input{--clear-btn-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--input-border-width:0 0 2px 0;--placeholder-color:var(--bar-text-color);--input-text-color:var(--bar-text-color);--padding-start:21px;--nano-input-border-color--focus:black;font-size:1.2em;width:206px;display:flex;align-items:center;flex-direction:column;flex:1}:host([dir=rtl]) nano-input.search-input{--input-border-radius:5px 0 0 5px}:host(:not(.ready)) nano-input.search-input{overflow:hidden;max-height:1em}nano-input.search-input .search-icon{background:none;padding:0 8px;display:none;font-size:0.9em}nano-input.search-input .search-icon--show{display:flex !important}nano-input.search-input .search-icon--loader{animation:spin 1s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}nano-input.search-input .search-icon nano-icon{height:1.4em}.user-profile{display:flex;justify-content:space-between;align-items:center;padding:2em;background-color:var(--menu-user-profile-bg)}.user-profile .left{display:flex;align-items:center}.user-profile .avatar-container{position:relative}.user-profile .avatar-container img.avatar{border-radius:50px}.user-profile .avatar-container img.logo-small{position:absolute;height:30px;width:30px;inset-block-end:0;inset-inline-end:0;background-color:#27586e;border-radius:10px;padding:5px}.user-profile .user-details{display:flex;flex-direction:column;margin:0 1.25em;color:white}.user-profile .user-details .name{font-size:1.25em}.user-profile .user-details .bio{margin:0.5em 0}.user-profile .user-details .kudos span{background-color:#81c7eb;color:#415958;padding:0.25em;border-radius:0.5em;font-weight:bold}.user-profile .chevron-right{font-size:1.5em;color:white}.user-links{position:relative}.user-links .icon-btn{-webkit-padding-end:0;padding-inline-end:0;font-weight:500}.user-links .icon-btn nano-icon{-webkit-margin-start:5px;margin-inline-start:5px;width:16px;height:16px;transform-origin:center;transition:transform 0.2s ease, color 0.2s ease}.user-links .icon-btn.open nano-icon{transform:rotate(180deg);color:#007495}.user-links-panel{display:none;position:absolute;border-radius:4px 0 4px 4px;box-shadow:0 1px 5px 0 rgba(0, 0, 0, 0.4);background-color:#568c9d;opacity:0;transform:translate3d(0, 30px, 0);transition:transform 0.2s ease, opacity 0.2s ease;inset-inline-end:0;min-width:318px;z-index:2}.user-links-panel:focus{outline:none}.user-links-panel.show{opacity:1;transform:translate3d(0, calc(var(--padding) + 1px), 0)}.user-links-panel-content{padding:0 18px;display:flex;flex-direction:column;color:white}.user-links-panel-content a{padding:11px 0;-webkit-border-after:#669dac 1px solid;border-block-end:#669dac 1px solid}.user-links-panel-content a:hover,.user-links-panel-content a:focus{color:#455556}.user-links-panel-content a:last-child{-webkit-border-after:none;border-block-end:none}.user-links-panel-foot{background-color:#aac5cd;border-radius:0 0 4px 4px;padding:var(--padding);color:#455556;display:flex;align-items:center;font-weight:500;justify-content:space-between}.user-links-panel-foot a:hover{text-decoration:underline}.user-links-panel .user-profile{background-color:var(--bar-user-panel-bg)}:host{--bar-vertical-padding:21px;--bar-item-spacing:13px;--bar-background:white;--bar-text-color:#196c82;--bar-color-shade:rgb(12 90 113);--bar-color-tint:rgb(19 89 111);--bar-color-focus:#99a3a6;--bar-user-panel-bg:#016d86;--bar-dropdown-bg:#196c82;--bar-dropdown-text:white;--menu-background:#001a21;--menu-text-color:white;--menu-user-profile-bg:#001a21;--menu-user-panel-bg:#193037;--menu-padding:12px;--menu-hint-color:#33484d;--menu-title-text:#90c6e7;--menu-icon-color:white;--login-button-bg:#17bb75;--login-button-text:white;--padding:12px;--padding-top:var(--padding);--padding-end:var(--padding);--padding-bottom:var(--padding);--padding-start:var(--padding);display:flex;flex-direction:column;position:relative;line-height:1.5;height:100%;font-size:0.9375em;font-size:clamp(0.77rem, 1vw, 0.9rem)}:host input,:host select,:host button{font-family:inherit;-webkit-appearance:none;appearance:none;font-size:inherit}:host a:focus,:host button:focus{outline:none}:host a:focus-visible,:host button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";
+const globalNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.global-nav{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;z-index:var(--nano-layer-index-menubar, 10)}.global-nav button{background:none;color:inherit;border:none}.global-nav .icon-btn{position:relative;background:none;color:inherit;border:none;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}.global-nav .icon-btn nano-icon{width:18px;height:18px}.global-nav ::slotted(nano-nav-item[slot=icon]){--padding-top:9px;--padding-bottom:9px;--padding-start:7px;--padding-end:7px;--display:flex;font-size:18px}.global-nav a{color:inherit;text-decoration:none;white-space:nowrap}.global-nav .nav-links_title{margin:8px 0 3px}.global-nav .nav-links ul{margin:0;padding:0}.global-nav .nav-links li{list-style:none}.global-nav .login-btn{display:flex;align-items:center}.global-nav .menu-btn{padding:9px var(--bar-item-spacing) 9px var(--bar-item-spacing)}.site-content{display:flex;transition:min-height 0.2s ease;position:relative;z-index:auto;align-items:stretch;flex:1}.mask{opacity:0;background:rgba(0, 0, 0, 0.3);position:fixed;inset-inline:0;inset-block-start:0;height:100vh;z-index:-1;transition:transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s;visibility:hidden}.mask.open{opacity:1;transition:z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;z-index:3;visibility:visible}.bars{color:var(--bar-text-color);z-index:var(--nano-layer-index-menubar, 10);position:relative;max-width:100%;min-width:100%;box-shadow:none;transition:0.2s ease box-shadow}[stuck] .bars{box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15)}.bars::before{content:\"\";width:100%;height:100%;z-index:-1;background:var(--bar-background);position:absolute}.main-bar{width:100%;padding-inline:0 var(--bar-item-spacing);padding-block:var(--bar-vertical-padding);display:flex;align-items:center;justify-content:space-between;overflow-x:hidden}.main-bar:focus{outline:none}:host(.ready) .main-bar{overflow-x:visible}.main-bar>*,.main-bar ::slotted(*){transition:opacity 0.2s ease}:host(:not(.ready)) .main-bar>*,:host(:not(.ready)) .main-bar ::slotted(*){opacity:0 !important}:host(.ready) .main-bar>*,:host(.ready) .main-bar ::slotted(*){opacity:1}:host(.resizing) .main-bar>*,:host(.resizing) .main-bar ::slotted(*){opacity:0 !important}.main-bar>*{flex:0 0 auto}.main-bar>* ::slotted(nano-nav-item[slot=icon]){-webkit-margin-start:11px;margin-inline-start:11px}.main-bar>* ::slotted(nano-nav-item),.main-bar>* nano-nav-item{--color-hover:var(--bar-color-focus);--secondary-bg-color:var(--bar-dropdown-bg);--secondary-color:var(--bar-dropdown-text);--bg-color-open:var(--bar-background);--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;text-decoration:none !important}.main-bar .icon-btn{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:6px;margin-inline-start:6px}:host(.threshold-2) .main-bar .icon-btn{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:11px;margin-inline-start:11px}.main-bar .menu-btn.icon-btn{margin:0 !important;-webkit-border-end:1.5px solid var(--bar-color-shade);border-inline-end:1.5px solid var(--bar-color-shade)}.main-bar .logo{height:36px;width:200px;min-width:200px}:host(:not(.threshold-1)) .main-bar .logo{height:30px}.main-bar .logo-link{-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:0;margin-inline-start:0;padding-inline:var(--bar-item-spacing);display:flex;align-items:center;border:none}.main-bar .nav-links{flex:0 0 auto;display:flex;justify-content:space-around}.main-bar .nav-links ul{display:flex;justify-content:space-around}.main-bar .nav-links ::slotted(nano-nav-item),.main-bar .nav-links nano-nav-item{--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;--margin:0 var(--bar-item-spacing)}.main-bar .nav-links--main{justify-content:flex-start;letter-spacing:1.5px;font-weight:600;font-stretch:condensed;text-transform:uppercase;font-size:1.065em;-webkit-margin-end:auto;margin-inline-end:auto}.main-bar .nav-links--main ::slotted(nano-nav-item){--color:var(--bar-text-color);--padding-end:3px;--padding-start:0}.main-bar .nav-links--sub{--color:var(--color, #e2e2e2);-webkit-margin-start:6px;margin-inline-start:6px;justify-content:flex-end}.main-bar .login-btn{display:inline-block;border-radius:4px;background-color:var(--login-button-bg);color:var(--login-button-text);padding:3px 10px;position:relative;inset-inline-start:auto;inset-block-end:auto;margin-inline:11px 0}.main-bar .measure-ele{min-width:1px;display:block;margin:0;padding:0}.sticker-trigger{background:var(--bar-background);width:100%;height:1px;z-index:20;position:relative}.sticker-trigger+.sticker-trigger{display:none}.gn-menu{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:-1;display:none;transition:z-index 0.01s ease 0.2s;height:100vh;width:100vw;overflow-y:auto}:host(.threshold-4) .gn-menu{position:absolute;width:calc(100vw - 20px)}.gn-menu.menu-full-screen{width:100vw !important}.gn-menu_wrap{max-width:92vw;width:335px;background:var(--menu-background);color:var(--menu-text-color);padding:calc(var(--bar-vertical-padding) + 1px) 0 0;box-shadow:0 0 36px 0 rgba(0, 0, 0, 0.8);position:relative;pointer-events:all;-webkit-margin-after:36px;margin-block-end:36px;opacity:0;outline:none;transition:transform 0.2s ease, opacity 0.2s ease;overflow:hidden}.gn-menu_wrap.has-promotion{padding:var(--menu-padding) 0 0}.gn-menu.open{z-index:var(--nano-layer-index-dropdown, 300);transition:z-index 0.01s ease}.gn-menu.open .gn-menu_wrap{opacity:1;transform:translate3d(0, 0, 0) !important;transition:transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s}.gn-menu_actions{-webkit-padding-end:calc(var(--menu-padding) / 2);padding-inline-end:calc(var(--menu-padding) / 2);display:flex;justify-content:space-between}.gn-menu_actions-counter{background:#d0021b;color:var(--menu-text-color);position:absolute;inset-block-end:4px;inset-inline:auto 0;font-size:9px;height:14px;line-height:14px;width:auto;min-width:14px;border-radius:50%;box-sizing:border-box;text-align:center;text-indent:0}.gn-menu .content-wrap{position:relative;transition:0.2s ease min-height;min-height:190px}.gn-menu .content--sub{padding:var(--menu-padding) 0 var(--menu-padding) 7px}.gn-menu .menu-btn{-webkit-margin-end:auto;margin-inline-end:auto}.gn-menu .nav-links{display:flex;flex-wrap:wrap}.gn-menu .nav-links ::slotted(nano-nav-item),.gn-menu .nav-links nano-nav-item{--icon-size:14px;--display:inline-block;--secondary-bg-color:#001a21;--padding-top:10px;--padding-bottom:10px;--padding-end:calc(var(--menu-padding) * 2);--padding-start:calc(var(--menu-padding) + 3px);--color:var(--menu-text-color);--color-hover:var(--menu-title-text);--bg-color-hover:transparent;--bg-color-focus:#002530;--focus-outline:none;width:100%}.gn-menu .nav-links .user-nav{--bg-color:var(--menu-user-panel-bg);--padding-top:9px;--padding-bottom:9px;font-weight:bold;margin:5px 0 0}.gn-menu .nav-links .user-nav ::slotted(nano-nav-item),.gn-menu .nav-links .user-nav nano-nav-item{font-weight:500;--bg-color:transparent}.gn-menu .nav-links .user-nav .content{padding:0;background-color:var(--menu-user-panel-bg)}.gn-menu .nav-links .user-nav .content--sub{padding-inline:var(--menu-padding)}.gn-menu .nav-links .user-nav .back-btn{-webkit-padding-start:var(--menu-padding);padding-inline-start:var(--menu-padding)}.gn-menu .nav-links_title{margin:0 var(--menu-padding) 4px;-webkit-border-after:1px solid var(--menu-hint-color);border-block-end:1px solid var(--menu-hint-color);-webkit-padding-after:8px;padding-block-end:8px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:700}.gn-menu .nav-links_title--sites{-webkit-border-after:none;border-block-end:none}.gn-menu .nav-links-wrap{margin:18px 0}.gn-menu .nav-links-wrap:last-child{-webkit-margin-after:0;margin-block-end:0}.gn-menu .nav-links .back-btn{-webkit-border-before:1px solid var(--menu-hint-color);border-block-start:1px solid var(--menu-hint-color);-webkit-border-after:1px solid var(--menu-hint-color);border-block-end:1px solid var(--menu-hint-color);display:flex;align-items:center;padding:10px 11px 10px 0;width:100%;font-size:12px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:700;cursor:pointer;font-stretch:expanded}.gn-menu .nav-links .back-btn:hover{color:var(--menu-text-color)}.gn-menu .nav-links .back-btn nano-icon{-webkit-margin-end:10px;margin-inline-end:10px;font-size:12px;color:var(--menu-icon-color)}.gn-menu .nav-links--sub{display:flex;flex-wrap:wrap}.gn-menu .nav-links--sub ::slotted(nano-nav-item),.gn-menu .nav-links--sub nano-nav-item{--border-bottom:none;--padding-end:var(--menu-padding);--padding-start:var(--menu-padding);--padding-top:8px;--padding-bottom:8px;margin:0;width:50%;line-height:1.8}.gn-menu .nav-links--sites ::slotted(nano-nav-item),.gn-menu .nav-links--sites nano-nav-item{width:100%}.gn-menu .nav-links .content{padding:8px var(--menu-padding)}.gn-menu .login-btn{padding-inline:7px var(--menu-padding);padding-block:var(--menu-padding)}.gn-menu .login-btn nano-icon{-webkit-margin-start:10px;margin-inline-start:10px}.gn-menu .logout-btn{justify-content:flex-end}.gn-menu .logout-btn a{padding:0 5px}.search-btn::before{content:\"\";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-20px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}.search-btn--open::before{transform:translateZ(0) scaleX(1);opacity:0.7}.search-bar{height:0;overflow:hidden;transition:0.2s ease height;padding:0 var(--bar-item-spacing);outline:none;max-width:45em;-webkit-margin-start:auto;margin-inline-start:auto;}.search-bar .search-widget{margin:0;overflow:inherit;max-width:none;max-height:none;min-width:auto;-webkit-padding-end:0;padding-inline-end:0}.search-bar .search-widget .search-icon--search{display:none}.search-bar .search-widget .search-input{--input-border-width:2px 0 0 0;--input-bg-color:#f3f3f3;--nano-input-border-color:transparent;--nano-input-border-color--focus:var(--bar-color-shade);font-size:1.1875em}.search-bar .search-widget nano-select.search-input{--input-border-width:2px 3px 0 0;--input-bg-color:var(--bar-color-shade);--input-bg-color--focus:#f3f3f3;color:#f3f3f3}.search-bar .search-widget nano-select.search-input.has-focus{color:var(--bar-color-shade)}.search-bar .search-widget .select-input__arrow{font-size:0.75em}.search-bar .search-widget .select__mask.sc-nano-select{line-height:2.35em;min-height:2.35em;-webkit-padding-before:2px;padding-block-start:2px}.search-bar .search-inputs{padding:0;margin:0}.search-bar .search-autocomplete{inset-block-start:100%;width:100%}.search-widget{-webkit-padding-end:var(--bar-item-spacing);padding-inline-end:var(--bar-item-spacing);-webkit-margin-start:var(--bar-item-spacing);margin-inline-start:var(--bar-item-spacing);-webkit-margin-end:auto;margin-inline-end:auto;position:relative;flex:1 1 auto;max-width:500px;min-width:350px;max-height:36px;inset-block-start:-1px}.search-inputs{display:flex;margin:0}.search-inputs input[type=submit]{display:none}.search-autocomplete{position:absolute;inset-block-start:calc(100% + 15px);width:calc(100% - var(--bar-item-spacing));inset-inline-start:0;background:white;border:2px solid var(--bar-color-tint);border-radius:0 0 5px 5px;color:#4a4a4a;-webkit-padding-before:calc(var(--bar-vertical-padding) / 2);padding-block-start:calc(var(--bar-vertical-padding) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:1px;padding-block-end:1px;-webkit-padding-start:0;padding-inline-start:0;z-index:1}.search-autocomplete-hit{padding-block:calc(var(--bar-vertical-padding) / 4);padding-inline:var(--bar-item-spacing);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:start;line-height:1.5;cursor:pointer}.search-autocomplete-hit-scope{color:#a7b0b3;font-weight:600}.search-autocomplete-hit:hover,.search-autocomplete-hit:focus-visible{background-color:#e4e6e8}.search-autocomplete-hit:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.search-autocomplete-hit:focus{outline:none}.search-autocomplete-hit .search__highlight,.search-autocomplete-hit em{font-weight:bold;font-style:normal}.search-autocomplete-hit--no-result:hover,.search-autocomplete-hit--no-result:focus{background:none !important}.search-autocomplete-foot{margin:7px 0 0}.search-autocomplete-submit{background:none;border:none;align-self:normal;padding:9px var(--bar-item-spacing) !important;cursor:pointer;display:flex;align-items:center;color:#007495;justify-content:flex-end;width:100%;text-decoration:underline;-webkit-border-before:1px solid #e8eaea;border-block-start:1px solid #e8eaea}.search-autocomplete-submit:hover,.search-autocomplete-submit:focus{background-color:#e4e6e8}nano-select.search-input{--input-border-width:0 0 2px 0;--input-text-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--padding-end:var(--bar-item-spacing);--nano-input-border-color--focus:black;font-stretch:condensed;font-weight:600;letter-spacing:1.5px;font-size:1.2em;flex:0 1 auto;width:auto;display:flex;align-items:center;flex-direction:column;position:relative;inset-inline-start:1px;text-transform:uppercase}:host(:not(.ready)) nano-select.search-input{overflow:hidden;max-height:1em}nano-select.search-input .down-arrow{font-size:0.65em}nano-input.search-input{--clear-btn-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--input-border-width:0 0 2px 0;--placeholder-color:var(--bar-text-color);--input-text-color:var(--bar-text-color);--padding-start:21px;--nano-input-border-color--focus:black;font-size:1.2em;width:206px;display:flex;align-items:center;flex-direction:column;flex:1}:host([dir=rtl]) nano-input.search-input{--input-border-radius:5px 0 0 5px}:host(:not(.ready)) nano-input.search-input{overflow:hidden;max-height:1em}nano-input.search-input .search-icon{background:none;padding:0 8px;display:none;font-size:0.9em}nano-input.search-input .search-icon--show{display:flex !important}nano-input.search-input .search-icon--loader{animation:spin 1s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}nano-input.search-input .search-icon nano-icon{height:1.4em}.user-profile{display:flex;justify-content:space-between;align-items:center;padding:2em;background-color:var(--menu-user-profile-bg)}.user-profile .left{display:flex;align-items:center}.user-profile .avatar-container{position:relative}.user-profile .avatar-container img.avatar{border-radius:50px}.user-profile .avatar-container img.logo-small{position:absolute;height:30px;width:30px;inset-block-end:0;inset-inline-end:0;background-color:#27586e;border-radius:10px;padding:5px}.user-profile .user-details{display:flex;flex-direction:column;margin:0 1.25em;color:white}.user-profile .user-details .name{font-size:1.25em}.user-profile .user-details .bio{margin:0.5em 0}.user-profile .user-details .kudos span{background-color:#81c7eb;color:#415958;padding:0.25em;border-radius:0.5em;font-weight:bold}.user-profile .chevron-right{font-size:1.5em;color:white}.user-links{position:relative}.user-links .icon-btn{-webkit-padding-end:0;padding-inline-end:0;font-weight:500;padding:7px}.user-links .icon-btn nano-icon{-webkit-margin-start:5px;margin-inline-start:5px;width:16px;height:16px;transform-origin:center;transition:transform 0.2s ease, color 0.2s ease}.user-links .icon-btn.open nano-icon{transform:rotate(180deg);color:#007495}.user-links-panel{display:none;position:absolute;border-radius:4px 0 4px 4px;box-shadow:0 1px 5px 0 rgba(0, 0, 0, 0.4);background-color:#568c9d;opacity:0;transform:translate3d(0, 30px, 0);transition:transform 0.2s ease, opacity 0.2s ease;inset-inline-end:0;min-width:318px;z-index:2}.user-links-panel:focus{outline:none}.user-links-panel.show{opacity:1;transform:translate3d(0, calc(var(--padding) + 1px), 0)}.user-links-panel-content{padding:0 18px;display:flex;flex-direction:column;color:white}.user-links-panel-content a{padding:11px 0;-webkit-border-after:#669dac 1px solid;border-block-end:#669dac 1px solid}.user-links-panel-content a:hover,.user-links-panel-content a:focus{color:#455556}.user-links-panel-content a:last-child{-webkit-border-after:none;border-block-end:none}.user-links-panel-foot{background-color:#aac5cd;border-radius:0 0 4px 4px;padding:var(--padding);color:#455556;display:flex;align-items:center;font-weight:500;justify-content:space-between}.user-links-panel-foot a:hover{text-decoration:underline}.user-links-panel .user-profile{background-color:var(--bar-user-panel-bg)}:host{--bar-vertical-padding:21px;--bar-item-spacing:13px;--bar-background:white;--bar-text-color:#196c82;--bar-color-shade:rgb(12 90 113);--bar-color-tint:rgb(19 89 111);--bar-color-focus:#99a3a6;--bar-user-panel-bg:#016d86;--bar-dropdown-bg:#196c82;--bar-dropdown-text:white;--menu-background:#001a21;--menu-text-color:white;--menu-user-profile-bg:#001a21;--menu-user-panel-bg:#193037;--menu-padding:12px;--menu-hint-color:#33484d;--menu-title-text:#90c6e7;--menu-icon-color:white;--login-button-bg:#17bb75;--login-button-text:white;--padding:12px;--padding-top:var(--padding);--padding-end:var(--padding);--padding-bottom:var(--padding);--padding-start:var(--padding);display:flex;flex-direction:column;position:relative;line-height:1.5;height:100%;font-size:0.9375em;font-size:clamp(0.77rem, 1vw, 0.9rem)}:host input,:host select,:host button{font-family:inherit;-webkit-appearance:none;appearance:none;font-size:inherit}:host a:focus,:host button:focus{outline:none}:host a:focus-visible,:host button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";
 // the 'breakpoints' where different segments of content go into or out-of the burger / overflow menu
 const THRESHOLDBREAKS = {
@@ -471,6 +471,18 @@ const GlobalNav = class {
     this.showAutocomplete = false;
     return;
   }
+  /**
+   * Manually open or close the overflow (burger) menu
+   * @param openClose - optionally force open (true) or close (false)
+   */
+  async toggleOverflowMenu(openClose) {
+    if (openClose === true || (openClose === undefined && !this.modalIsOpen)) {
+      this.menuOpen();
+    }
+    else {
+      this.menuClose(null, true);
+    }
+  }
   async getMyAccData() {
     if (!!this.myAccData)
       return;
@@ -506,7 +518,7 @@ const GlobalNav = class {
     const config = { timeout: 5000 };
     try {
       if (this.env === 'local') {
-        this.myAccData = (await Promise.resolve().then(function () { return require('./local-my-account-a3362993.js'); }));
+        this.myAccData = (await Promise.resolve().then(function () { return require('./local-my-account-d79ed0a2.js'); }));
       }
       else {
         this.myAccData = await clientFetch(url + 'nav_bar_data.json', config);
@@ -915,7 +927,7 @@ const GlobalNav = class {
         'has-promotion': this.hasPromotionSlot,
         'menu-full-screen': this.menuFullScreen,
         'secondary-open': !!this.secondaryMenuOpen,
-      }, "aria-expanded": this.modalOpen ? 'true' : 'false', ref: (div) => (this.menuDiv = div) }, index.h("div", { class: "gn-menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1" }, index.h("div", { class: "gn-menu_actions" }, index.h("button", { class: "menu-btn icon-btn icon-btn", onMouseDown: this.onMenuBtnClick, onKeyDown: this.onMenuBtnKeyDown }, this.threshold < this.THRESHOLDLIMIT - 3 && (index.h("nano-icon", { name: "light/times", "aria-label": "close menu" })), this.threshold >= this.THRESHOLDLIMIT - 3 && (index.h("nano-icon", { name: "light/bars", "aria-label": "close menu" }))), this.threshold <
+      }, "aria-expanded": this.modalOpen ? 'true' : 'false', ref: (div) => (this.menuDiv = div), part: "burger" }, index.h("div", { class: "gn-menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1" }, index.h("div", { class: "gn-menu_actions", part: "burger-actions-bar" }, index.h("button", { class: "menu-btn icon-btn icon-btn", onMouseDown: this.onMenuBtnClick, onKeyDown: this.onMenuBtnKeyDown }, this.threshold < this.THRESHOLDLIMIT - 3 && (index.h("nano-icon", { name: "light/times", "aria-label": "close menu" })), this.threshold >= this.THRESHOLDLIMIT - 3 && (index.h("nano-icon", { name: "light/bars", "aria-label": "close menu" }))), this.threshold <
       this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
       !!this.iconSlotLen && index.h("slot", { name: "icon" }),
       this.myAccData &&
@@ -924,7 +936,7 @@ const GlobalNav = class {
         this.msgUrl && (index.h("a", { href: this.msgUrl, class: "icon-btn" }, index.h("nano-icon", { name: "light/bell" }), this.msgCount > 0 && (index.h("span", { class: "gn-menu_actions-counter" }, this.msgCount)))),
         this.cartUrl && (index.h("a", { href: this.cartUrl, class: "icon-btn" }, index.h("nano-icon", { name: "light/shopping-cart" }), this.cartCount > 0 && (index.h("span", { class: "gn-menu_actions-counter" }, this.cartCount)))),
       ],
-    ], this.myAccData && this.myAccData.urls.login && (index.h("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register", ' ', index.h("nano-icon", { name: "solid/chevron-right" })))), index.h("div", { class: "content-wrap", ref: (div) => (this.menuContentDiv = div) }, index.h("div", { class: "content" }, index.h("nav", { class: "nav-links nav-links--main", role: "menu" }, index.h("slot", { name: "overflow", onSlotchange: this.assessSlottedContent }), this.threshold <
+    ], this.myAccData && this.myAccData.urls.login && (index.h("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register", ' ', index.h("nano-icon", { name: "solid/chevron-right" })))), index.h("div", { class: "content-wrap", ref: (div) => (this.menuContentDiv = div) }, index.h("div", { class: "content", part: "burger-content" }, index.h("nav", { class: "nav-links nav-links--main", role: "menu" }, index.h("slot", { name: "overflow", onSlotchange: this.assessSlottedContent }), this.threshold <
       this.THRESHOLDLIMIT - THRESHOLDBREAKS.main &&
       !!this.mainSlotLen && (index.h("slot", { name: "main", onSlotchange: this.assessSlottedContent }))), (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
       this.hasSiteSlot) ||
@@ -945,7 +957,7 @@ const GlobalNav = class {
       (this.loggedInNavItms.length || this.hasLoggedinSlot) && (index.h("nav", { class: "nav-links", "aria-label": "Your user account links" }, index.h("nano-nav-item", { class: "nano-global-nav user-nav nano-global-nav-menu" }, this.myAccountUser.name, index.h("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), index.h("div", { slot: "secondary" }, index.h("div", { class: "content" }, index.h("button", { class: "back-btn", onClick: this.subMenuClose }, index.h("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back" }), this.myAccountUser.name), !!((_a = this.myAccountUser) === null || _a === void 0 ? void 0 : _a.small_avatar_url) && (index.h("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), index.h("div", { class: "content--sub" }, index.h("slot", { name: "loggedin", onSlotchange: this.assessSlottedContent }), this.loggedInNavItms.map((link) => {
       return (index.h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, index.h("a", { href: link.address, target: link.target }, link.title)));
     }), index.h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, index.h("a", { href: this.myAccData.urls.forgot_password +
-        this.ssoRedirect }, "Change Password")))))))), index.h("slot", { name: "promotion", onSlotchange: this.assessSlottedContent }), this.myAccData && this.myAccData.urls.logout && (index.h("div", { class: "login-btn logout-btn" }, index.h("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), index.h("div", { class: "sticker-trigger" }), index.h("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 } }, index.h("div", { class: "bars" }, index.h("nav", { class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div), role: !!this.mainSlotLen &&
+        this.ssoRedirect }, "Change Password")))))))), index.h("slot", { name: "promotion", onSlotchange: this.assessSlottedContent }), this.myAccData && this.myAccData.urls.logout && (index.h("div", { class: "login-btn logout-btn" }, index.h("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), index.h("div", { class: "sticker-trigger" }), index.h("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 } }, index.h("div", { class: "bars" }, index.h("nav", { part: "main-bar", class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div), role: !!this.mainSlotLen &&
         this.threshold >= this.THRESHOLDLIMIT - THRESHOLDBREAKS.main
         ? 'menu'
         : undefined }, (this.hasPromotionSlot ||
@@ -964,7 +976,7 @@ const GlobalNav = class {
         this.threshold <
           this.THRESHOLDLIMIT - THRESHOLDBREAKS.about) ||
       this.hasSiteSlot ||
-      !!this.siteNavItms.length) && (index.h("button", { class: "menu-btn icon-btn", onMouseDown: this.menuOpen, onKeyDown: this.onMenuBtnKeyDown, "aria-expanded": this.modalOpen ? 'true' : 'false', "aria-controls": "global-nav-menu", ref: (btn) => (this.menuBtn = btn) }, index.h("nano-icon", { name: "light/bars", "aria-label": "open menu" }))), this.showLogo && (index.h("a", { href: this.logoUrl, class: "logo-link" }, index.h("img", { src: index.getAssetPath(`../nano-assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))), !this.showLogo && (index.h("div", { class: "logo-link" }, index.h("slot", { name: "logo", onSlotchange: this.assessSlottedContent }))), index.h("div", { class: "nav-links nav-links--main" }, index.h("slot", { name: "main", onSlotchange: this.assessSlottedContent })), this.mainSlotLen === 0 &&
+      !!this.siteNavItms.length) && (index.h("button", { class: "menu-btn icon-btn", onMouseDown: this.menuOpen, onKeyDown: this.onMenuBtnKeyDown, "aria-expanded": this.modalOpen ? 'true' : 'false', "aria-controls": "global-nav-menu", ref: (btn) => (this.menuBtn = btn) }, index.h("nano-icon", { name: "light/bars", "aria-label": "open menu" }))), this.showLogo && (index.h("a", { href: this.logoUrl, class: "logo-link", part: "logo-link" }, index.h("img", { src: index.getAssetPath(`../nano-assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))), !this.showLogo && (index.h("div", { class: "logo-link" }, index.h("slot", { name: "logo", onSlotchange: this.assessSlottedContent }))), index.h("div", { class: "nav-links nav-links--main" }, index.h("slot", { name: "main", onSlotchange: this.assessSlottedContent })), this.mainSlotLen === 0 &&
       this.threshold >=
         this.THRESHOLDLIMIT - THRESHOLDBREAKS.search && [
       this.showSearch && !!this.internalSearchIndeces.length && (index.h("div", { class: "search-widget", role: "combobox", "aria-owns": "autocomplete-results", "aria-expanded": this.showAutocomplete && this.autocompleteResults
@@ -1010,7 +1022,7 @@ const GlobalNav = class {
         this.THRESHOLDLIMIT - THRESHOLDBREAKS.search) && (index.h("div", { id: "global-nav-search-bar", class: {
         'search-bar': true,
         show: this.searchBarShown,
-      }, "aria-expanded": this.searchBarShown ? 'true' : 'false', role: "region", tabindex: "-1", ref: (div) => (this.searchBarEl = div) }, index.h("div", { class: "search-widget" }, this.showSearch && !!this.internalSearchIndeces.length && (index.h("div", null, searchWidget)), (!this.showSearch || !this.myAccData) &&
+      }, "aria-expanded": this.searchBarShown ? 'true' : 'false', role: "region", tabindex: "-1", ref: (div) => (this.searchBarEl = div), part: "search-bar" }, index.h("div", { class: "search-widget" }, this.showSearch && !!this.internalSearchIndeces.length && (index.h("div", null, searchWidget)), (!this.showSearch || !this.myAccData) &&
       !!this.searchSlotLen && (index.h("slot", { name: "search", onSlotchange: this.assessSlottedContent }))))))), (this.threshold < this.THRESHOLDLIMIT - 3 ||
       this.menuFullScreen) && (index.h("div", { class: {
         mask: true,
@@ -1098,6 +1110,7 @@ const GlobalNav = class {
       }
     });
   }
+  static get assetsDirs() { return ["assets"]; }
   get el() { return index.getElement(this); }
   static get watchers() { return {
     "myAccountData": ["handleMyAccountData"],