@nanoporetech-digital/components 5.11.9 → 5.12.0

package/dist/nano-components/nano-demo.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["capitalise","value","charAt","toUpperCase","slice","mediumDate","date","undefined","Date","toLocaleDateString","year","month","day","currency","amount","currencyCode","toLocaleUpperCase","Intl","NumberFormat","style","format","Demo","constructor","hostRef","this","order","checks","name","external_id","status","account_info","email","address_line_1","address_line_2","address_postcode","address_city","address_region","address_country","individual_name_compliance_information","table","names","addresses","match","false_positive","organization_compliance_information","label","item_type","answer","further_information","attachments","notes","orderId","createdAt","updatedAt","subStatus","customerPaymentMethod","paymentPlatform","dataAreaId","defaultShippingWarehouse","deliveryContact","deliveryMode","deliveryName","deliveryTerms","invoiceAccountNumber","orderAccountNumber","orderAccountName","originalLeadTime","salesDate","salesName","salesOrigin","salesOriginName","customerReference","purchaseOrder","additionalDocuments","total","shippingAmount","taxAmount","projectId","deliveryPhoneNumber","invoicePhoneNumber","quoteNumber","customerType","invoiceAccountEmail","partnerReference","sentToD365","sentToD365Status","orderAccountEmail","controllingAccountNumber","controllingAccountEmail","deliveryAddress","street","city","postcode","region","regionCode","countryCode","invoiceAddress","shopOrderLines","sku","quantity","price","maskSku","productType","salesTag","requestedShippingDate","discount","discountPercentage","finalSku","includedItems","orderLines","pickedItems","packedItems","trackingNumbers","trackingUpdates","ecoOrder","revenueOrder","columns","title","prop","pinned","rowHeader","autoTooltip","cellTemplate","_","c","cellModel","lineItemTotal","_a","length","forEach","itm","render","h","Host","rowRender","template","TableCell","renderedRow","rowModel","_b","map","item","class","header","Fragment","flat","rows","caption","showFooter","footRender","colSpan","scope"],"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}>&nbsp;</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}>&nbsp;</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}>&nbsp;</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"],"mappings":"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"}
+{"version":3,"names":["capitalise","value","charAt","toUpperCase","slice","mediumDate","date","undefined","Date","toLocaleDateString","year","month","day","currency","amount","currencyCode","toLocaleUpperCase","Intl","NumberFormat","style","format","Demo","constructor","hostRef","this","order","checks","name","external_id","status","account_info","email","address_line_1","address_line_2","address_postcode","address_city","address_region","address_country","individual_name_compliance_information","table","names","addresses","match","false_positive","organization_compliance_information","label","item_type","answer","further_information","attachments","notes","orderId","createdAt","updatedAt","subStatus","customerPaymentMethod","paymentPlatform","dataAreaId","defaultShippingWarehouse","deliveryContact","deliveryMode","deliveryName","deliveryTerms","invoiceAccountNumber","orderAccountNumber","orderAccountName","originalLeadTime","salesDate","salesName","salesOrigin","salesOriginName","customerReference","purchaseOrder","additionalDocuments","total","shippingAmount","taxAmount","projectId","deliveryPhoneNumber","invoicePhoneNumber","quoteNumber","customerType","invoiceAccountEmail","partnerReference","sentToD365","sentToD365Status","orderAccountEmail","controllingAccountNumber","controllingAccountEmail","deliveryAddress","street","city","postcode","region","regionCode","countryCode","invoiceAddress","shopOrderLines","sku","quantity","price","maskSku","productType","salesTag","requestedShippingDate","discount","discountPercentage","finalSku","includedItems","orderLines","pickedItems","packedItems","trackingNumbers","trackingUpdates","ecoOrder","revenueOrder","columns","title","prop","pinned","rowHeader","autoTooltip","cellTemplate","_","c","cellModel","lineItemTotal","length","forEach","itm","render","h","Host","rowRender","template","TableCell","renderedRow","rowModel","map","item","class","header","Fragment","flat","rows","caption","showFooter","footRender","colSpan","scope"],"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}>&nbsp;</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}>&nbsp;</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}>&nbsp;</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"],"mappings":"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"}

package/dist/nano-components/nano-details.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as r,B as e,h as i,g as o}from"./index-9695db0a.js";import{d as s}from"./transitions-fb09eb32.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{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;--padding:1em;--btn-padding:var(--padding);--content-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--transition-duration:0.2s;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}:host([disabled]){opacity:0.5}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}.header{block-size:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;line-height:1;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims);cursor:pointer}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}.header:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open .header{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(nano-icon){--color:currentcolor}.body{overflow:hidden;transition:height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;outline:none}.is-hidden .body>*{animation:fade 0.1s ease reverse}.open .body>*{animation:fade var(--transition-duration, 0.3s) ease forwards}.content{padding:var(--content-padding)}@keyframes fade{from{opacity:0}to{opacity:1}}";const n=class{constructor(e){t(this,e);this.nanoOpened=r(this,"nanoOpened",7);this.nanoClosed=r(this,"nanoClosed",7);this.nanoAfterOpened=r(this,"nanoAfterOpened",7);this.nanoAfterClosed=r(this,"nanoAfterClosed",7);this.stateChanging=false;this.onKeyDown=t=>{if(this.stateChanging||this.disabled)return;switch(t.key){case"Enter":case" ":t.preventDefault();this.open=!this.open;break;case"ArrowUp":t.preventDefault();this.open=false;break;case"ArrowDown":t.preventDefault();this.open=true;break}};this.onMouseDown=t=>{t.preventDefault();this.headerEl.focus();if(this.stateChanging||this.disabled)return;this.open=!this.open};this.label="";this.open=false;this.disabled=false;this.noHandle=false;this.iconRotation=90;this.useCacheHeight=false}toggleClick(){this.stateChanging=true;if(this.open)this.show();else this.hide()}hide(){const t=this.nanoClosed.emit(this.open);if(t.defaultPrevented){this.open=true;this.detailsEl.open=true;return}this.cacheHeight=this.contentEl.scrollHeight;this.bodyEl.style.height=this.cacheHeight+"px";s(this.bodyEl,{className:"is-shown",show:false,transitionProp:["height"]}).then((()=>{this.stateChanging=false;this.detailsEl.open=false;this.bodyEl.classList.add("is-hidden");this.nanoAfterClosed.emit()}));requestAnimationFrame((()=>{this.bodyEl.style.height="0px"}))}show(){const t=this.nanoOpened.emit();this.detailsEl.open=true;if(t.defaultPrevented){this.open=false;this.detailsEl.open=false;return}s(this.bodyEl,{className:"is-shown",show:true,transitionProp:["height"]}).then((()=>{this.stateChanging=false;this.bodyEl.style.height="auto";this.nanoAfterOpened.emit()}));this.bodyEl.style.height=(this.useCacheHeight&&this.cacheHeight?this.cacheHeight:this.contentEl.scrollHeight)+"px"}attachMo(){if(this.mo||!this.detailsEl||!e.isBrowser)return;this.mo=new MutationObserver((t=>{if(this.stateChanging)return;for(const r of t){if(r.type==="attributes"&&r.attributeName==="open"){this.open=this.detailsEl.open}}}));this.mo.observe(this.detailsEl,{attributes:true})}componentWillLoad(){this.hasStartSlot=!!this.host.querySelector('[slot="icon-start"]');this.hasEndSlot=!!this.host.querySelector('[slot="icon-end"]')}componentDidLoad(){this.bodyEl.style.height=this.open?"auto":"0";if(this.open)this.detailsEl.setAttribute("open","true");this.attachMo()}connectedCallback(){this.attachMo()}disconnectedCallback(){if(this.mo){this.mo.disconnect();this.mo=undefined}}render(){return i("details",{part:"base",ref:t=>this.detailsEl=t,class:{details:true,open:this.open,disabled:this.disabled}},i("summary",{part:"header","aria-controls":"content","aria-expanded":this.open?"true":"false","aria-disabled":this.disabled?"true":"false",tabindex:this.disabled?"-1":"0",style:{display:this.noHandle?"none":""},id:"header",role:"button",class:"header",ref:t=>this.headerEl=t,onKeyDown:this.onKeyDown,onClick:this.onMouseDown},this.hasStartSlot?i("span",{part:"icon--start",class:"icon icon--start",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-start"})):"",i("div",{part:"label",class:"label"},this.label?this.label:i("slot",{name:"label"})),this.hasEndSlot?i("span",{part:"icon--end",class:"icon icon--end",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-end"})):""),i("div",{part:"body",class:"body",ref:t=>this.bodyEl=t,tabindex:"-1",role:"region","aria-labelledby":"header"},i("div",{part:"content",ref:t=>this.contentEl=t,class:"content",id:"content"},i("slot",null))))}get host(){return o(this)}static get watchers(){return{open:["toggleClick"]}}};n.style=a;export{n as nano_details};
+import{r as t,c as r,B as e,h as i,g as o}from"./index-9695db0a.js";import{d as s}from"./transitions-bd15e312.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{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;--padding:1em;--btn-padding:var(--padding);--content-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--transition-duration:0.2s;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}:host([disabled]){opacity:0.5}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}.header{block-size:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;line-height:1;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims);cursor:pointer}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}.header:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open .header{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(nano-icon){--color:currentcolor}.body{overflow:hidden;transition:height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;outline:none}.is-hidden .body>*{animation:fade 0.1s ease reverse}.open .body>*{animation:fade var(--transition-duration, 0.3s) ease forwards}.content{padding:var(--content-padding)}@keyframes fade{from{opacity:0}to{opacity:1}}";const n=class{constructor(e){t(this,e);this.nanoOpened=r(this,"nanoOpened",7);this.nanoClosed=r(this,"nanoClosed",7);this.nanoAfterOpened=r(this,"nanoAfterOpened",7);this.nanoAfterClosed=r(this,"nanoAfterClosed",7);this.stateChanging=false;this.onKeyDown=t=>{if(this.stateChanging||this.disabled)return;switch(t.key){case"Enter":case" ":t.preventDefault();this.open=!this.open;break;case"ArrowUp":t.preventDefault();this.open=false;break;case"ArrowDown":t.preventDefault();this.open=true;break}};this.onMouseDown=t=>{t.preventDefault();this.headerEl.focus();if(this.stateChanging||this.disabled)return;this.open=!this.open};this.label="";this.open=false;this.disabled=false;this.noHandle=false;this.iconRotation=90;this.useCacheHeight=false}toggleClick(){this.stateChanging=true;if(this.open)this.show();else this.hide()}hide(){const t=this.nanoClosed.emit(this.open);if(t.defaultPrevented){this.open=true;this.detailsEl.open=true;return}this.cacheHeight=this.contentEl.scrollHeight;this.bodyEl.style.height=this.cacheHeight+"px";s(this.bodyEl,{className:"is-shown",show:false,transitionProp:["height"]}).then((()=>{this.stateChanging=false;this.detailsEl.open=false;this.bodyEl.classList.add("is-hidden");this.nanoAfterClosed.emit()}));requestAnimationFrame((()=>{this.bodyEl.style.height="0px"}))}show(){const t=this.nanoOpened.emit();this.detailsEl.open=true;if(t.defaultPrevented){this.open=false;this.detailsEl.open=false;return}s(this.bodyEl,{className:"is-shown",show:true,transitionProp:["height"]}).then((()=>{this.stateChanging=false;this.bodyEl.style.height="auto";this.nanoAfterOpened.emit()}));this.bodyEl.style.height=(this.useCacheHeight&&this.cacheHeight?this.cacheHeight:this.contentEl.scrollHeight)+"px"}attachMo(){if(this.mo||!this.detailsEl||!e.isBrowser)return;this.mo=new MutationObserver((t=>{if(this.stateChanging)return;for(const r of t){if(r.type==="attributes"&&r.attributeName==="open"){this.open=this.detailsEl.open}}}));this.mo.observe(this.detailsEl,{attributes:true})}componentWillLoad(){this.hasStartSlot=!!this.host.querySelector('[slot="icon-start"]');this.hasEndSlot=!!this.host.querySelector('[slot="icon-end"]')}componentDidLoad(){this.bodyEl.style.height=this.open?"auto":"0";if(this.open)this.detailsEl.setAttribute("open","true");this.attachMo()}connectedCallback(){this.attachMo()}disconnectedCallback(){if(this.mo){this.mo.disconnect();this.mo=undefined}}render(){return i("details",{part:"base",ref:t=>this.detailsEl=t,class:{details:true,open:this.open,disabled:this.disabled}},i("summary",{part:"header","aria-controls":"content","aria-expanded":this.open?"true":"false","aria-disabled":this.disabled?"true":"false",tabindex:this.disabled?"-1":"0",style:{display:this.noHandle?"none":""},id:"header",role:"button",class:"header",ref:t=>this.headerEl=t,onKeyDown:this.onKeyDown,onClick:this.onMouseDown},this.hasStartSlot?i("span",{part:"icon--start",class:"icon icon--start",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-start"})):"",i("div",{part:"label",class:"label"},this.label?this.label:i("slot",{name:"label"})),this.hasEndSlot?i("span",{part:"icon--end",class:"icon icon--end",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-end"})):""),i("div",{part:"body",class:"body",ref:t=>this.bodyEl=t,tabindex:"-1",role:"region","aria-labelledby":"header"},i("div",{part:"content",ref:t=>this.contentEl=t,class:"content",id:"content"},i("slot",null))))}get host(){return o(this)}static get watchers(){return{open:["toggleClick"]}}};n.style=a;export{n as nano_details};
 //# sourceMappingURL=nano-details.entry.js.map

package/dist/nano-components/nano-dialog.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as i,c as a,h as o,a as t,g as s}from"./index-9695db0a.js";import{M as e}from"./modal-bd9638c0.js";import{l as n,u as r}from"./scroll-ac332213.js";import{h as l}from"./slot-8126e238.js";import{C as d}from"./component-store-f7eb0a56.js";import"./tabbable-26a66a22.js";import"./dom-8599fac1.js";import"./throttle-ac4fcefa.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--tint-color:#00607b;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-layer-index-modal, 700)}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);max-inline-size:calc(100% - var(--nano-spacing-xlarge, 24px));max-block-size:calc(92% - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform}.dialog__panel:focus{outline:none}.dialog--with-ribbon .dialog__panel{border-block-start:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-fast, 0.1s) box-shadow;min-inline-size:auto}[stuck] .dialog__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}.dialog .dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding-block:0;padding-inline:var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-radius:0 0 inherit inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-radius:inherit inherit 0 0}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto}.dialog__footer ::slotted(button){margin-inline-end:var(--nano-spacing-small, 8px) !important}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__close-txt{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);transition:box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.dialog__overlay{position:fixed;inset:0;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.dialog--open .dialog__overlay{opacity:1}";let c=0;const g=class{constructor(o){i(this,o);this.nanoShow=a(this,"nanoShow",7);this.nanoAfterShow=a(this,"nanoAfterShow",7);this.nanoHide=a(this,"nanoHide",7);this.nanoAfterHide=a(this,"nanoAfterHide",7);this.nanoInitialFocus=a(this,"nanoInitialFocus",7);this.nanoRequestClose=a(this,"nanoRequestClose",7);this.componentId=`dialog-${++c}`;this.willShow=false;this.willHide=false;this.handleKeyDown=i=>{if(i.key==="Escape"){this.requestClose()}};this.requestClose=()=>{const i=this.nanoRequestClose.emit();if(!i.defaultPrevented&&!this.noUserDismiss){this.hide()}else{this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250)}};this.handleTransitionEnd=i=>{if(i.propertyName==="opacity"&&i.composedPath().find((i=>i===this.panel||i===this.overlay))){this.willShow=false;this.willHide=false;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit();if(!this.open)this.dialog.hidden=true}};this.handleSlotChange=()=>{this.hasFooter=l(this.host,"footer")};this.noDismiss=false;this.hasFooter=false;this.showRibbon=true;this.open=false;this.label=undefined;this.noHeader=false;this.noFooter=false;this.noUserDismiss=false;this.storeId=undefined;this.storeMethod="url-hash";this.hoist=false}get panel(){return this._panel}set panel(i){if(this._panel){this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}i.addEventListener("transitionend",this.handleTransitionEnd);this._panel=i}handleOpenChange(){this.open?this.show():this.hide()}handleHoistChange(){if(!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}async show(){if(this.willShow){return}const i=this.nanoShow.emit();if(i.defaultPrevented){this.open=false;return}if(this.dialog)this.dialog.hidden=false;this.originalTrigger=document.activeElement;this.willShow=true;this.open=true;this.modal.activate();n(this.host);if(this.open){this.host.addEventListener("nanoAfterShow",(()=>{const i=this.nanoInitialFocus.emit();if(!i.defaultPrevented){this.panel.focus({preventScroll:true})}}),{once:true})}}async hide(){if(this.willHide){return}const i=this.nanoHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();r(this.host);this.stopVideos();const a=this.originalTrigger;if(a&&typeof a.focus==="function"){setTimeout((()=>a.focus()))}}stopVideos(){const i=Array.from(this.host.querySelectorAll("iframe,video"));i.forEach((i=>{if(i.tagName.toLowerCase()==="video")i.pause();else{const a=i.src;i.src=a}}))}connectedCallback(){this.handleHoistChange();this.modal=new e(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)d.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.dialog.hidden=!this.open}disconnectedCallback(){r(this.host);if(!this.panel)return;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return o(t,null,o("div",{part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--has-footer":!this.noFooter,"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown,ref:i=>this.dialog=i},o("div",{part:"overlay",class:"dialog__overlay",ref:i=>this.overlay=i,onClick:this.requestClose}),o("div",{ref:i=>this.panel=i,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:0},o("div",{class:"dialog__body-wrap"},!this.noHeader&&o("nano-sticker",null,o("div",{part:"header",class:"dialog__header"},o("span",{part:"title",class:"dialog__title",id:`${this.componentId}-title`},o("slot",{name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&o("nano-icon-button",{part:"close-button",exportparts:"base:close-button__base",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/times"}))),o("div",{part:"body",class:"dialog__body"},o("slot",null)),!this.noFooter&&(this.hasFooter||!this.noUserDismiss)&&o("nano-sticker",{position:"bottom"},o("footer",{part:"footer",class:"dialog__footer"},o("slot",{name:"footer",onSlotchange:this.handleSlotChange}),!this.noUserDismiss&&o("button",{class:"dialog__close-txt",onClick:this.requestClose},"Close")))))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"],hoist:["handleHoistChange"]}}};g.style=h;export{g as nano_dialog};
+import{r as i,c as a,h as o,a as t,g as s}from"./index-9695db0a.js";import{M as e}from"./modal-88c117cd.js";import{l as n,u as r}from"./scroll-ac332213.js";import{h as l}from"./slot-8126e238.js";import{C as d}from"./component-store-486d9d7a.js";import"./tabbable-26a66a22.js";import"./dom-8599fac1.js";import"./throttle-ac4fcefa.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--tint-color:#00607b;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-layer-index-modal, 700)}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);max-inline-size:calc(100% - var(--nano-spacing-xlarge, 24px));max-block-size:calc(92% - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform}.dialog__panel:focus{outline:none}.dialog--with-ribbon .dialog__panel{border-block-start:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-fast, 0.1s) box-shadow;min-inline-size:auto}[stuck] .dialog__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}.dialog .dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding-block:0;padding-inline:var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-radius:0 0 inherit inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-radius:inherit inherit 0 0}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto}.dialog__footer ::slotted(button){margin-inline-end:var(--nano-spacing-small, 8px) !important}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__close-txt{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);transition:box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.dialog__overlay{position:fixed;inset:0;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.dialog--open .dialog__overlay{opacity:1}";let c=0;const g=class{constructor(o){i(this,o);this.nanoShow=a(this,"nanoShow",7);this.nanoAfterShow=a(this,"nanoAfterShow",7);this.nanoHide=a(this,"nanoHide",7);this.nanoAfterHide=a(this,"nanoAfterHide",7);this.nanoInitialFocus=a(this,"nanoInitialFocus",7);this.nanoRequestClose=a(this,"nanoRequestClose",7);this.componentId=`dialog-${++c}`;this.willShow=false;this.willHide=false;this.handleKeyDown=i=>{if(i.key==="Escape"){this.requestClose()}};this.requestClose=()=>{const i=this.nanoRequestClose.emit();if(!i.defaultPrevented&&!this.noUserDismiss){this.hide()}else{this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250)}};this.handleTransitionEnd=i=>{if(i.propertyName==="opacity"&&i.composedPath().find((i=>i===this.panel||i===this.overlay))){this.willShow=false;this.willHide=false;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit();if(!this.open)this.dialog.hidden=true}};this.handleSlotChange=()=>{this.hasFooter=l(this.host,"footer")};this.noDismiss=false;this.hasFooter=false;this.showRibbon=true;this.open=false;this.label=undefined;this.noHeader=false;this.noFooter=false;this.noUserDismiss=false;this.storeId=undefined;this.storeMethod="url-hash";this.hoist=false}get panel(){return this._panel}set panel(i){if(this._panel){this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}i.addEventListener("transitionend",this.handleTransitionEnd);this._panel=i}handleOpenChange(){this.open?this.show():this.hide()}handleHoistChange(){if(!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}async show(){if(this.willShow){return}const i=this.nanoShow.emit();if(i.defaultPrevented){this.open=false;return}if(this.dialog)this.dialog.hidden=false;this.originalTrigger=document.activeElement;this.willShow=true;this.open=true;this.modal.activate();n(this.host);if(this.open){this.host.addEventListener("nanoAfterShow",(()=>{const i=this.nanoInitialFocus.emit();if(!i.defaultPrevented){this.panel.focus({preventScroll:true})}}),{once:true})}}async hide(){if(this.willHide){return}const i=this.nanoHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();r(this.host);this.stopVideos();const a=this.originalTrigger;if(a&&typeof a.focus==="function"){setTimeout((()=>a.focus()))}}stopVideos(){const i=Array.from(this.host.querySelectorAll("iframe,video"));i.forEach((i=>{if(i.tagName.toLowerCase()==="video")i.pause();else{const a=i.src;i.src=a}}))}connectedCallback(){this.handleHoistChange();this.modal=new e(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)d.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.dialog.hidden=!this.open}disconnectedCallback(){r(this.host);if(!this.panel)return;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return o(t,null,o("div",{part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--has-footer":!this.noFooter,"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown,ref:i=>this.dialog=i},o("div",{part:"overlay",class:"dialog__overlay",ref:i=>this.overlay=i,onClick:this.requestClose}),o("div",{ref:i=>this.panel=i,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:0},o("div",{class:"dialog__body-wrap"},!this.noHeader&&o("nano-sticker",null,o("div",{part:"header",class:"dialog__header"},o("span",{part:"title",class:"dialog__title",id:`${this.componentId}-title`},o("slot",{name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&o("nano-icon-button",{part:"close-button",exportparts:"base:close-button__base",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/times"}))),o("div",{part:"body",class:"dialog__body"},o("slot",null)),!this.noFooter&&(this.hasFooter||!this.noUserDismiss)&&o("nano-sticker",{position:"bottom"},o("footer",{part:"footer",class:"dialog__footer"},o("slot",{name:"footer",onSlotchange:this.handleSlotChange}),!this.noUserDismiss&&o("button",{class:"dialog__close-txt",onClick:this.requestClose},"Close")))))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"],hoist:["handleHoistChange"]}}};g.style=h;export{g as nano_dialog};
 //# sourceMappingURL=nano-dialog.entry.js.map

package/dist/nano-components/nano-drawer.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as e,c as a,h as t,g as r}from"./index-9695db0a.js";import{M as i}from"./modal-bd9638c0.js";import{l as s,u as n}from"./scroll-ac332213.js";import{h as o}from"./slot-8126e238.js";import{w as d}from"./events-6a805b42.js";import{C as l}from"./component-store-f7eb0a56.js";import"./tabbable-26a66a22.js";import"./dom-8599fac1.js";import"./throttle-ac4fcefa.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--size:25rem;--panel-background:white;--panel-shadow:var(--nano-layer-shadow-xlarge, 0 4px 16px rgba(0, 0, 0, 0.4));--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--header-button-color:#b5aea7;--footer-background:#e4e6e8;--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-large, 20px);--body-spacing:var(--nano-spacing-large, 20px);--footer-spacing:var(--nano-spacing-medium, 16px) var(--nano-spacing-large, 20px);--dir:1}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;pointer-events:none;overflow:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-layer-index-modal, 700)}.drawer__panel{position:absolute;z-index:2;max-inline-size:100%;max-block-size:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;display:flex;flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px #4a4a4a}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline:auto 0;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel,.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background)}[stuck] .drawer__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.drawer__title{flex:1 1 auto;font:inherit;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.2;padding:var(--header-spacing);margin:0}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-xsmall, 4px);padding:0 var(--header-spacing)}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);--color:var(--header-button-color)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative}.drawer__footer ::slotted(button:not(:last-of-type)){margin-inline-end:var(--nano-spacing-xsmall, 4px)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";const c=class{constructor(t){e(this,t);this.nanoShow=a(this,"nanoShow",7);this.nanoHide=a(this,"nanoHide",7);this.nanoAfterHide=a(this,"nanoAfterHide",7);this.nanoAfterShow=a(this,"nanoAfterShow",7);this.nanoInitialFocus=a(this,"nanoInitialFocus",7);this.nanoRquestClose=a(this,"nanoRquestClose",7);this.handleDocumentKeyDown=e=>{if(this.contained){return}if(e.key==="Escape"&&this.modal.isActive()&&this.open){e.stopImmediatePropagation();this.requestClose("keyboard")}};this.handleTransitionEnd=e=>{if(e.propertyName==="opacity"&&e.composedPath().find((e=>e===this.panel||e===this.overlay))){if(!this.open){this.drawer.hidden=true;this.overlay.hidden=false;this.panel.hidden=false}this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit()}};this.handleSlotChange=()=>{this.hasFooter=o(this.host,"footer")};this.noDismiss=false;this.hasFooter=undefined;this.open=false;this.label=undefined;this.placement="end";this.contained=false;this.noHeader=false;this.storeId=undefined;this.storeMethod="url-hash";this.noUserDismiss=false;this.hoist=false}get panel(){return this._panel}set panel(e){if(this._panel){this.panel.removeEventListener("animationend",this.handleTransitionEnd)}if(!e)return;e.addEventListener("transitionend",this.handleTransitionEnd);this._panel=e}handleHoistChange(){if(!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}async show(){if(this.open)return undefined;this.open=true;return d(this.host,"nanoAfterShow")}async hide(){if(!this.open)return undefined;this.open=false;return d(this.host,"nanoAfterHide")}requestClose(e){const a=this.nanoRquestClose.emit({source:e});if(a.defaultPrevented||this.noUserDismiss){this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250);return}this.hide()}handleNoModalChange(){if(this.open&&!this.contained){this.modal.activate();s(this.host)}if(this.open&&this.contained){this.modal.deactivate();n(this.host)}}async handleOpenChange(){if(this.open){this.nanoShow.emit();this.addOpenListeners();this.originalTrigger=document.activeElement;if(!this.contained){this.modal.activate();s(this.host)}const e=this.host.querySelector("[autofocus]");if(e){e.removeAttribute("autofocus")}this.drawer.hidden=false;requestAnimationFrame((()=>{const a=this.nanoInitialFocus.emit();if(!a.defaultPrevented){if(e){e.focus({preventScroll:true})}else{this.panel.focus({preventScroll:true})}}if(e){e.setAttribute("autofocus","")}}));this.nanoAfterShow.emit();return}this.nanoHide.emit();this.removeOpenListeners();if(!this.contained){this.modal.deactivate();n(this.host)}const e=this.originalTrigger;if(typeof(e===null||e===void 0?void 0:e.focus)==="function"){setTimeout((()=>e.focus()))}}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}connectedCallback(){this.handleHoistChange();this.modal=new i(this.host)}disconnectedCallback(){n(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.drawer.hidden=!this.open;if(this.open){this.addOpenListeners();if(!this.contained){this.modal.activate();s(this.host)}}}render(){return t("div",{ref:e=>this.drawer=e,part:"base",class:{drawer:true,"drawer--open":this.open,[`drawer--${this.placement}`]:true,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":o(this.host,"footer"),"drawer--has-header":!this.noHeader,"drawer--nodismiss":this.noDismiss}},t("div",{ref:e=>this.overlay=e,part:"overlay",class:"drawer__overlay",onClick:()=>this.requestClose("overlay"),tabindex:"-1"}),t("div",{ref:e=>this.panel=e,part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:undefined,"aria-labelledby":!this.noHeader?"title":undefined,tabindex:"0"},t("div",{class:"drawer__main"},!this.noHeader&&t("nano-sticker",null,t("div",{part:"header",class:"drawer__header"},t("h2",{part:"title",class:"drawer__title",id:"title"},t("slot",{name:"label"},this.label.length>0?this.label:String.fromCharCode(65279))),t("div",{part:"header-actions",class:"drawer__header-actions"},t("slot",{name:"header-actions"}),!this.noUserDismiss&&t("nano-icon-button",{part:"close-button",exportparts:"base:close-button__base",class:"drawer__close",iconName:"light/times",label:"Close",onClick:()=>this.requestClose("close-button")})))),t("div",{part:"body",class:"drawer__body"},t("slot",null)),t("nano-sticker",{position:"bottom"},t("footer",{part:"footer",class:"drawer__footer"},t("slot",{name:"footer",onSlotchange:this.handleSlotChange}))))))}get host(){return r(this)}static get watchers(){return{hoist:["handleHoistChange"],contained:["handleNoModalChange"],open:["handleOpenChange"]}}};c.style=h;export{c as nano_drawer};
+import{r as e,c as a,h as t,g as r}from"./index-9695db0a.js";import{M as i}from"./modal-88c117cd.js";import{l as s,u as n}from"./scroll-ac332213.js";import{h as o}from"./slot-8126e238.js";import{w as d}from"./events-6a805b42.js";import{C as l}from"./component-store-486d9d7a.js";import"./tabbable-26a66a22.js";import"./dom-8599fac1.js";import"./throttle-ac4fcefa.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--size:25rem;--panel-background:white;--panel-shadow:var(--nano-layer-shadow-xlarge, 0 4px 16px rgba(0, 0, 0, 0.4));--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--header-button-color:#b5aea7;--footer-background:#e4e6e8;--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-large, 20px);--body-spacing:var(--nano-spacing-large, 20px);--footer-spacing:var(--nano-spacing-medium, 16px) var(--nano-spacing-large, 20px);--dir:1}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;pointer-events:none;overflow:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-layer-index-modal, 700)}.drawer__panel{position:absolute;z-index:2;max-inline-size:100%;max-block-size:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;display:flex;flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px #4a4a4a}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline:auto 0;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel,.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background)}[stuck] .drawer__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.drawer__title{flex:1 1 auto;font:inherit;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.2;padding:var(--header-spacing);margin:0}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-xsmall, 4px);padding:0 var(--header-spacing)}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);--color:var(--header-button-color)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative}.drawer__footer ::slotted(button:not(:last-of-type)){margin-inline-end:var(--nano-spacing-xsmall, 4px)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";const c=class{constructor(t){e(this,t);this.nanoShow=a(this,"nanoShow",7);this.nanoHide=a(this,"nanoHide",7);this.nanoAfterHide=a(this,"nanoAfterHide",7);this.nanoAfterShow=a(this,"nanoAfterShow",7);this.nanoInitialFocus=a(this,"nanoInitialFocus",7);this.nanoRquestClose=a(this,"nanoRquestClose",7);this.handleDocumentKeyDown=e=>{if(this.contained){return}if(e.key==="Escape"&&this.modal.isActive()&&this.open){e.stopImmediatePropagation();this.requestClose("keyboard")}};this.handleTransitionEnd=e=>{if(e.propertyName==="opacity"&&e.composedPath().find((e=>e===this.panel||e===this.overlay))){if(!this.open){this.drawer.hidden=true;this.overlay.hidden=false;this.panel.hidden=false}this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit()}};this.handleSlotChange=()=>{this.hasFooter=o(this.host,"footer")};this.noDismiss=false;this.hasFooter=undefined;this.open=false;this.label=undefined;this.placement="end";this.contained=false;this.noHeader=false;this.storeId=undefined;this.storeMethod="url-hash";this.noUserDismiss=false;this.hoist=false}get panel(){return this._panel}set panel(e){if(this._panel){this.panel.removeEventListener("animationend",this.handleTransitionEnd)}if(!e)return;e.addEventListener("transitionend",this.handleTransitionEnd);this._panel=e}handleHoistChange(){if(!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}async show(){if(this.open)return undefined;this.open=true;return d(this.host,"nanoAfterShow")}async hide(){if(!this.open)return undefined;this.open=false;return d(this.host,"nanoAfterHide")}requestClose(e){const a=this.nanoRquestClose.emit({source:e});if(a.defaultPrevented||this.noUserDismiss){this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250);return}this.hide()}handleNoModalChange(){if(this.open&&!this.contained){this.modal.activate();s(this.host)}if(this.open&&this.contained){this.modal.deactivate();n(this.host)}}async handleOpenChange(){if(this.open){this.nanoShow.emit();this.addOpenListeners();this.originalTrigger=document.activeElement;if(!this.contained){this.modal.activate();s(this.host)}const e=this.host.querySelector("[autofocus]");if(e){e.removeAttribute("autofocus")}this.drawer.hidden=false;requestAnimationFrame((()=>{const a=this.nanoInitialFocus.emit();if(!a.defaultPrevented){if(e){e.focus({preventScroll:true})}else{this.panel.focus({preventScroll:true})}}if(e){e.setAttribute("autofocus","")}}));this.nanoAfterShow.emit();return}this.nanoHide.emit();this.removeOpenListeners();if(!this.contained){this.modal.deactivate();n(this.host)}const e=this.originalTrigger;if(typeof e?.focus==="function"){setTimeout((()=>e.focus()))}}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}connectedCallback(){this.handleHoistChange();this.modal=new i(this.host)}disconnectedCallback(){n(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.drawer.hidden=!this.open;if(this.open){this.addOpenListeners();if(!this.contained){this.modal.activate();s(this.host)}}}render(){return t("div",{ref:e=>this.drawer=e,part:"base",class:{drawer:true,"drawer--open":this.open,[`drawer--${this.placement}`]:true,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":o(this.host,"footer"),"drawer--has-header":!this.noHeader,"drawer--nodismiss":this.noDismiss}},t("div",{ref:e=>this.overlay=e,part:"overlay",class:"drawer__overlay",onClick:()=>this.requestClose("overlay"),tabindex:"-1"}),t("div",{ref:e=>this.panel=e,part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:undefined,"aria-labelledby":!this.noHeader?"title":undefined,tabindex:"0"},t("div",{class:"drawer__main"},!this.noHeader&&t("nano-sticker",null,t("div",{part:"header",class:"drawer__header"},t("h2",{part:"title",class:"drawer__title",id:"title"},t("slot",{name:"label"},this.label.length>0?this.label:String.fromCharCode(65279))),t("div",{part:"header-actions",class:"drawer__header-actions"},t("slot",{name:"header-actions"}),!this.noUserDismiss&&t("nano-icon-button",{part:"close-button",exportparts:"base:close-button__base",class:"drawer__close",iconName:"light/times",label:"Close",onClick:()=>this.requestClose("close-button")})))),t("div",{part:"body",class:"drawer__body"},t("slot",null)),t("nano-sticker",{position:"bottom"},t("footer",{part:"footer",class:"drawer__footer"},t("slot",{name:"footer",onSlotchange:this.handleSlotChange}))))))}get host(){return r(this)}static get watchers(){return{hoist:["handleHoistChange"],contained:["handleNoModalChange"],open:["handleOpenChange"]}}};c.style=h;export{c as nano_drawer};
 //# sourceMappingURL=nano-drawer.entry.js.map

package/dist/nano-components/nano-drawer.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["drawerCss","Drawer","this","handleDocumentKeyDown","event","contained","key","modal","isActive","open","stopImmediatePropagation","requestClose","handleTransitionEnd","propertyName","composedPath","find","node","panel","overlay","drawer","hidden","nanoAfterShow","emit","nanoAfterHide","handleSlotChange","hasFooter","hasSlot","host","_panel","ele","removeEventListener","addEventListener","handleHoistChange","hoist","Array","from","document","body","children","includes","prepend","async","undefined","waitForEvent","source","nanoRequestClose","nanoRquestClose","defaultPrevented","noUserDismiss","noDismiss","setTimeout","hide","handleNoModalChange","activate","lockBodyScrolling","deactivate","unlockBodyScrolling","nanoShow","addOpenListeners","originalTrigger","activeElement","autoFocusTarget","querySelector","removeAttribute","requestAnimationFrame","nanoInitialFocus","focus","preventScroll","setAttribute","nanoHide","removeOpenListeners","trigger","connectedCallback","Modal","disconnectedCallback","componentWillLoad","show","storeId","ComponentStore","init","storeMethod","componentDidLoad","render","h","ref","part","class","placement","noHeader","onClick","tabindex","role","label","id","name","length","String","fromCharCode","exportparts","iconName","position","onSlotchange"],"sources":["./src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","./src/components/drawer/drawer.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/base' as base;\n@use '../../global/style/utilities/globals' as global;\n@use '../../global/style/nano-theme/colours' as color;\n@use '../../global/style/nano-theme/layers' as layer;\n\n:host {\n  /**\n  * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n  * @prop --panel-background: background color of panel. Default to 'white'\n  * @prop --panel-shadow: Defaults to #{layer.$layer-shadow-xlarge};\n  * @prop --scrim-color: overlay colour of alert display. Defaults to #{layer.$layer-overlay-dark};\n  * @prop --footer-background: Defaults to #{map.get(color.$colors, lightgrey)};\n  * @prop --header-spacing: The amount of padding to use for the header.\n  * @prop --body-spacing: The amount of padding to use for the body.\n  * @prop --footer-spacing: The amount of padding to use for the footer. Defaults to #{base.$spacing-medium} #{base.$spacing-large}\n  * @prop --header-button-color: defaults to #{map.get(color.$colors, palegrey)};\n  */\n\n  --size: 25rem;\n  --panel-background: white;\n  --panel-shadow: #{layer.$layer-shadow-xlarge};\n  --scrim-color: #{layer.$layer-overlay-dark};\n  --header-button-color: #{map.get(color.$colors, palegrey)};\n  --footer-background: #{map.get(color.$colors, lightgrey)};\n  --header-background: var(--panel-background);\n  --header-spacing: #{base.$spacing-large};\n  --body-spacing: #{base.$spacing-large};\n  --footer-spacing: #{base.$spacing-medium} #{base.$spacing-large};\n  --dir: 1;\n}\n\n@include mx.rtl-host() {\n  --dir: -1;\n}\n\n.drawer {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  inline-size: 100%;\n  block-size: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &--contained {\n    position: absolute;\n    z-index: initial;\n  }\n\n  &--fixed {\n    position: fixed;\n    z-index: #{layer.$layer-index-modal};\n  }\n}\n\n.drawer__panel {\n  position: absolute;\n  z-index: 2;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  background-color: var(--panel-background);\n  box-shadow: var(--panel-shadow);\n  pointer-events: all;\n  transition: #{base.$transition-fast} opacity, #{base.$transition-fast} transform;\n  display: flex;\n  flex-direction: column;\n\n  @media (forced-colors: active) {\n    border: solid 1px #{map.get(color.$colors, black)};\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  .drawer--nodismiss & {\n    animation: cannotClose 0.25s ease-in-out 1;\n\n    @keyframes cannotClose {\n      0% {\n        transform: scale(1);\n      }\n\n      50% {\n        transform: scale(1.08);\n      }\n\n      100% {\n        transform: scale(1);\n      }\n    }\n  }\n\n  .drawer--top & {\n    inset-block: 0 auto;\n    inset-inline: 0 auto;\n    inline-size: 100%;\n    block-size: var(--size);\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n\n  .drawer--bottom & {\n    inset-block: auto 0;\n    inset-inline: 0 auto;\n    inline-size: 100%;\n    block-size: var(--size);\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  .drawer--top.drawer--open &,\n  .drawer--bottom.drawer--open & {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .drawer--start & {\n    inset-block: 0 auto;\n    inset-inline: 0 auto;\n    inline-size: var(--size);\n    block-size: 100%;\n    opacity: 0;\n    transform: translateX(calc(var(--dir) * -100%));\n  }\n\n  .drawer--end & {\n    inset-block: 0 auto;\n    inset-inline: auto 0;\n    inline-size: var(--size);\n    block-size: 100%;\n    opacity: 0;\n    transform: translateX(calc(var(--dir) * 100%));\n  }\n\n  .drawer--start.drawer--open &,\n  .drawer--end.drawer--open & {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n.drawer__header {\n  inline-size: 100%;\n  display: flex;\n  background-color: var(--header-background);\n\n  [stuck] & {\n    box-shadow: #{layer.$layer-shadow-medium};\n  }\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  font: inherit;\n  font-size: #{base.$fontsize-large};\n  line-height: 1.2;\n  padding: var(--header-spacing);\n  margin: 0;\n}\n\n.drawer__header-actions {\n  flex-shrink: 0;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: #{base.$spacing-xsmall};\n  padding: 0 var(--header-spacing);\n\n  .drawer__close,\n  ::slotted(nano-icon-button) {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: #{base.$fontsize-xlarge};\n\n    --color: var(--header-button-color);\n  }\n}\n\n.drawer__main {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n  flex: 1 1 auto;\n}\n\n.drawer__body {\n  display: block;\n  flex: 1 1 auto;\n  padding: var(--body-spacing);\n  padding-block: 0 var(--body-spacing);\n  padding-inline: var(--body-spacing);\n\n  .drawer:not(.drawer--has-header) & {\n    padding-block-start: var(--body-spacing);\n  }\n}\n\n.drawer__footer {\n  inline-size: 100%;\n  text-align: end;\n  padding: var(--footer-spacing);\n  background: var(--footer-background);\n  inset-block-start: 1px;\n  position: relative;\n\n  ::slotted(button:not(:last-of-type)) {\n    margin-inline-end: #{base.$spacing-xsmall};\n  }\n\n  .drawer:not(.drawer--has-footer) & {\n    display: none;\n  }\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  pointer-events: all;\n  backdrop-filter: blur(#{layer.$layer-overlay-blur});\n  opacity: 0;\n  transition: #{base.$transition-fast} opacity;\n\n  .drawer--open & {\n    opacity: 1;\n  }\n\n  .drawer--contained & {\n    display: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  Watch,\n  h,\n  ComponentInterface,\n  Method,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { waitForEvent } from '../../utils/events';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * Drawers slide in from a container to expose additional options and information.\n *\n * @slot - The drawer's main content\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute\n * @slot header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @slot footer - The drawer's footer, usually one or more buttons representing various options\n *\n * @part base - The component's base wrapper\n * @part overlay - The overlay that covers the screen behind the drawer\n * @part panel - The drawer's panel (where the drawer and its content are rendered)\n * @part header - The drawer's header. This element wraps the title and header actions\n * @part header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @part title - The drawer's title\n * @part close-button - The close button, an `<nano-icon-button>`\n * @part close-button__base - The close button's exported `base` part\n * @part body - The drawer's body\n * @part footer - The drawer's footer\n */\n\n@Component({\n  tag: 'nano-drawer',\n  shadow: true,\n  styleUrl: 'drawer.scss',\n})\nexport class Drawer implements ComponentInterface {\n  // Private State\n\n  @Element() host: HTMLNanoDrawerElement;\n\n  private originalTrigger: HTMLElement | null;\n  private drawer: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n\n  get panel() {\n    return this._panel;\n  }\n  set panel(ele: HTMLElement) {\n    if (this._panel) {\n      this.panel.removeEventListener('animationend', this.handleTransitionEnd);\n    }\n    if (!ele) return;\n\n    ele.addEventListener('transitionend', this.handleTransitionEnd);\n    this._panel = ele;\n  }\n  private _panel: HTMLElement;\n\n  @State() noDismiss = false;\n  @State() hasFooter: boolean;\n\n  // Public API\n\n  /**\n   * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n   */\n  @Prop({ reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @Prop({ reflect: true }) label!: string;\n\n  /** The direction from which the drawer will open. */\n  @Prop({ reflect: true }) placement: 'top' | 'end' | 'bottom' | 'start' =\n    'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this attribute and add `position: relative` to the parent.\n   */\n  @Prop({ reflect: true }) contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop({ reflect: true }) noHeader = false;\n\n  /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */\n  @Prop() storeId?: string;\n\n  /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */\n  @Prop() storeMethod: StorageMethods = 'url-hash';\n\n  /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key  */\n  @Prop() noUserDismiss = false;\n\n  /** Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` */\n  @Prop() hoist = false;\n\n  @Watch('hoist')\n  handleHoistChange() {\n    if (!this.hoist || Array.from(document.body.children).includes(this.host))\n      return;\n    document.body.prepend(this.host);\n  }\n\n  /** Emitted when the drawer opens. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted when the drawer closes. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the drawer closes and all animations are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Emitted after the drawer opens and all animations are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the drawer opens and is ready to receive focus. Calling\n   * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n   */\n  @Event() nanoInitialFocus: EventEmitter;\n\n  /**\n   * Emitted when the user attempts to\n   * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n   * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n   * destructive behavior such as data loss.\n   */\n  @Event() nanoRquestClose: EventEmitter<{\n    source: 'close-button' | 'keyboard' | 'overlay';\n  }>;\n\n  /** Shows the drawer. */\n  @Method()\n  async show() {\n    if (this.open) return undefined;\n\n    this.open = true;\n    return waitForEvent(this.host, 'nanoAfterShow');\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    if (!this.open) return undefined;\n\n    this.open = false;\n    return waitForEvent(this.host, 'nanoAfterHide');\n  }\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const nanoRequestClose = this.nanoRquestClose.emit({ source });\n\n    if (nanoRequestClose.defaultPrevented || this.noUserDismiss) {\n      this.noDismiss = true;\n      setTimeout(() => (this.noDismiss = false), 250);\n      return;\n    }\n\n    this.hide();\n  }\n\n  // Prop Change Handlers\n\n  @Watch('contained')\n  handleNoModalChange() {\n    if (this.open && !this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (this.open && this.contained) {\n      this.modal.deactivate();\n      unlockBodyScrolling(this.host);\n    }\n  }\n\n  @Watch('open')\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.nanoShow.emit();\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      // Lock body scrolling only if the drawer isn't contained\n      if (!this.contained) {\n        this.modal.activate();\n        lockBodyScrolling(this.host);\n      }\n\n      // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n      // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n      // ourselves, and add the attribute back afterwards.\n      const autoFocusTarget = this.host.querySelector('[autofocus]');\n      if (autoFocusTarget) {\n        autoFocusTarget.removeAttribute('autofocus');\n      }\n      this.drawer.hidden = false;\n\n      // Set initial focus\n      requestAnimationFrame(() => {\n        const nanoInitialFocus = this.nanoInitialFocus.emit();\n\n        if (!nanoInitialFocus.defaultPrevented) {\n          // Set focus to the autofocus target and restore the attribute\n          if (autoFocusTarget) {\n            (autoFocusTarget as HTMLInputElement).focus({\n              preventScroll: true,\n            });\n          } else {\n            this.panel.focus({ preventScroll: true });\n          }\n        }\n\n        // Restore the autofocus attribute\n        if (autoFocusTarget) {\n          autoFocusTarget.setAttribute('autofocus', '');\n        }\n      });\n\n      this.nanoAfterShow.emit();\n      return;\n    }\n\n    // Hide\n    this.nanoHide.emit();\n    this.removeOpenListeners();\n\n    if (!this.contained) {\n      this.modal.deactivate();\n      unlockBodyScrolling(this.host);\n    }\n\n    // Restore focus to the original trigger\n    const trigger = this.originalTrigger;\n    if (typeof trigger?.focus === 'function') {\n      setTimeout(() => trigger.focus());\n    }\n  }\n\n  // Event Handling\n\n  private addOpenListeners() {\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Contained drawers aren't modal and don't response to the escape key\n    if (this.contained) {\n      return;\n    }\n\n    if (event.key === 'Escape' && this.modal.isActive() && this.open) {\n      event.stopImmediatePropagation();\n      this.requestClose('keyboard');\n    }\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      event\n        .composedPath()\n        .find((node) => node === this.panel || node === this.overlay)\n    ) {\n      if (!this.open) {\n        this.drawer.hidden = true;\n        // Now that the dialog is hidden, restore the overlay and panel for next time\n        this.overlay.hidden = false;\n        this.panel.hidden = false;\n      }\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  // Component Lifecycle\n\n  connectedCallback() {\n    this.handleHoistChange();\n    this.modal = new Modal(this.host);\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    // Show on init if open\n    if (this.open) this.show();\n    if (this.storeId)\n      ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n  }\n\n  componentDidLoad() {\n    this.drawer.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n\n      if (!this.contained) {\n        this.modal.activate();\n        lockBodyScrolling(this.host);\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div\n        ref={(ele) => (this.drawer = ele)}\n        part=\"base\"\n        class={{\n          drawer: true,\n          'drawer--open': this.open,\n          [`drawer--${this.placement}`]: true,\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--has-footer': hasSlot(this.host, 'footer'),\n          'drawer--has-header': !this.noHeader,\n          'drawer--nodismiss': this.noDismiss,\n        }}\n      >\n        <div\n          ref={(ele) => (this.overlay = ele)}\n          part=\"overlay\"\n          class=\"drawer__overlay\"\n          onClick={() => this.requestClose('overlay')}\n          tabindex=\"-1\"\n        />\n\n        <div\n          ref={(ele) => (this.panel = ele)}\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : undefined}\n          aria-labelledby={!this.noHeader ? 'title' : undefined}\n          tabindex=\"0\"\n        >\n          <div class=\"drawer__main\">\n            {!this.noHeader && (\n              <nano-sticker>\n                <div part=\"header\" class=\"drawer__header\">\n                  <h2 part=\"title\" class=\"drawer__title\" id=\"title\">\n                    {/* If there's no label, use an invisible character to prevent the header from collapsing */}\n                    <slot name=\"label\">\n                      {this.label.length > 0\n                        ? this.label\n                        : String.fromCharCode(65279)}\n                    </slot>\n                  </h2>\n                  <div part=\"header-actions\" class=\"drawer__header-actions\">\n                    <slot name=\"header-actions\" />\n\n                    {!this.noUserDismiss && (\n                      <nano-icon-button\n                        part=\"close-button\"\n                        exportparts=\"base:close-button__base\"\n                        class=\"drawer__close\"\n                        iconName=\"light/times\"\n                        label=\"Close\"\n                        onClick={() => this.requestClose('close-button')}\n                      />\n                    )}\n                  </div>\n                </div>\n              </nano-sticker>\n            )}\n\n            <div part=\"body\" class=\"drawer__body\">\n              <slot />\n            </div>\n\n            <nano-sticker position=\"bottom\">\n              <footer part=\"footer\" class=\"drawer__footer\">\n                <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n              </footer>\n            </nano-sticker>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["drawerCss","Drawer","this","handleDocumentKeyDown","event","contained","key","modal","isActive","open","stopImmediatePropagation","requestClose","handleTransitionEnd","propertyName","composedPath","find","node","panel","overlay","drawer","hidden","nanoAfterShow","emit","nanoAfterHide","handleSlotChange","hasFooter","hasSlot","host","_panel","ele","removeEventListener","addEventListener","handleHoistChange","hoist","Array","from","document","body","children","includes","prepend","async","undefined","waitForEvent","source","nanoRequestClose","nanoRquestClose","defaultPrevented","noUserDismiss","noDismiss","setTimeout","hide","handleNoModalChange","activate","lockBodyScrolling","deactivate","unlockBodyScrolling","nanoShow","addOpenListeners","originalTrigger","activeElement","autoFocusTarget","querySelector","removeAttribute","requestAnimationFrame","nanoInitialFocus","focus","preventScroll","setAttribute","nanoHide","removeOpenListeners","trigger","connectedCallback","Modal","disconnectedCallback","componentWillLoad","show","storeId","ComponentStore","init","storeMethod","componentDidLoad","render","h","ref","part","class","placement","noHeader","onClick","tabindex","role","label","id","name","length","String","fromCharCode","exportparts","iconName","position","onSlotchange"],"sources":["./src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","./src/components/drawer/drawer.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/base' as base;\n@use '../../global/style/utilities/globals' as global;\n@use '../../global/style/nano-theme/colours' as color;\n@use '../../global/style/nano-theme/layers' as layer;\n\n:host {\n  /**\n  * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n  * @prop --panel-background: background color of panel. Default to 'white'\n  * @prop --panel-shadow: Defaults to #{layer.$layer-shadow-xlarge};\n  * @prop --scrim-color: overlay colour of alert display. Defaults to #{layer.$layer-overlay-dark};\n  * @prop --footer-background: Defaults to #{map.get(color.$colors, lightgrey)};\n  * @prop --header-spacing: The amount of padding to use for the header.\n  * @prop --body-spacing: The amount of padding to use for the body.\n  * @prop --footer-spacing: The amount of padding to use for the footer. Defaults to #{base.$spacing-medium} #{base.$spacing-large}\n  * @prop --header-button-color: defaults to #{map.get(color.$colors, palegrey)};\n  */\n\n  --size: 25rem;\n  --panel-background: white;\n  --panel-shadow: #{layer.$layer-shadow-xlarge};\n  --scrim-color: #{layer.$layer-overlay-dark};\n  --header-button-color: #{map.get(color.$colors, palegrey)};\n  --footer-background: #{map.get(color.$colors, lightgrey)};\n  --header-background: var(--panel-background);\n  --header-spacing: #{base.$spacing-large};\n  --body-spacing: #{base.$spacing-large};\n  --footer-spacing: #{base.$spacing-medium} #{base.$spacing-large};\n  --dir: 1;\n}\n\n@include mx.rtl-host() {\n  --dir: -1;\n}\n\n.drawer {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  inline-size: 100%;\n  block-size: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &--contained {\n    position: absolute;\n    z-index: initial;\n  }\n\n  &--fixed {\n    position: fixed;\n    z-index: #{layer.$layer-index-modal};\n  }\n}\n\n.drawer__panel {\n  position: absolute;\n  z-index: 2;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  background-color: var(--panel-background);\n  box-shadow: var(--panel-shadow);\n  pointer-events: all;\n  transition: #{base.$transition-fast} opacity, #{base.$transition-fast} transform;\n  display: flex;\n  flex-direction: column;\n\n  @media (forced-colors: active) {\n    border: solid 1px #{map.get(color.$colors, black)};\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  .drawer--nodismiss & {\n    animation: cannotClose 0.25s ease-in-out 1;\n\n    @keyframes cannotClose {\n      0% {\n        transform: scale(1);\n      }\n\n      50% {\n        transform: scale(1.08);\n      }\n\n      100% {\n        transform: scale(1);\n      }\n    }\n  }\n\n  .drawer--top & {\n    inset-block: 0 auto;\n    inset-inline: 0 auto;\n    inline-size: 100%;\n    block-size: var(--size);\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n\n  .drawer--bottom & {\n    inset-block: auto 0;\n    inset-inline: 0 auto;\n    inline-size: 100%;\n    block-size: var(--size);\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  .drawer--top.drawer--open &,\n  .drawer--bottom.drawer--open & {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .drawer--start & {\n    inset-block: 0 auto;\n    inset-inline: 0 auto;\n    inline-size: var(--size);\n    block-size: 100%;\n    opacity: 0;\n    transform: translateX(calc(var(--dir) * -100%));\n  }\n\n  .drawer--end & {\n    inset-block: 0 auto;\n    inset-inline: auto 0;\n    inline-size: var(--size);\n    block-size: 100%;\n    opacity: 0;\n    transform: translateX(calc(var(--dir) * 100%));\n  }\n\n  .drawer--start.drawer--open &,\n  .drawer--end.drawer--open & {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n.drawer__header {\n  inline-size: 100%;\n  display: flex;\n  background-color: var(--header-background);\n\n  [stuck] & {\n    box-shadow: #{layer.$layer-shadow-medium};\n  }\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  font: inherit;\n  font-size: #{base.$fontsize-large};\n  line-height: 1.2;\n  padding: var(--header-spacing);\n  margin: 0;\n}\n\n.drawer__header-actions {\n  flex-shrink: 0;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: #{base.$spacing-xsmall};\n  padding: 0 var(--header-spacing);\n\n  .drawer__close,\n  ::slotted(nano-icon-button) {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: #{base.$fontsize-xlarge};\n\n    --color: var(--header-button-color);\n  }\n}\n\n.drawer__main {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n  flex: 1 1 auto;\n}\n\n.drawer__body {\n  display: block;\n  flex: 1 1 auto;\n  padding: var(--body-spacing);\n  padding-block: 0 var(--body-spacing);\n  padding-inline: var(--body-spacing);\n\n  .drawer:not(.drawer--has-header) & {\n    padding-block-start: var(--body-spacing);\n  }\n}\n\n.drawer__footer {\n  inline-size: 100%;\n  text-align: end;\n  padding: var(--footer-spacing);\n  background: var(--footer-background);\n  inset-block-start: 1px;\n  position: relative;\n\n  ::slotted(button:not(:last-of-type)) {\n    margin-inline-end: #{base.$spacing-xsmall};\n  }\n\n  .drawer:not(.drawer--has-footer) & {\n    display: none;\n  }\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  pointer-events: all;\n  backdrop-filter: blur(#{layer.$layer-overlay-blur});\n  opacity: 0;\n  transition: #{base.$transition-fast} opacity;\n\n  .drawer--open & {\n    opacity: 1;\n  }\n\n  .drawer--contained & {\n    display: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  Watch,\n  h,\n  ComponentInterface,\n  Method,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { waitForEvent } from '../../utils/events';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * Drawers slide in from a container to expose additional options and information.\n *\n * @slot - The drawer's main content\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute\n * @slot header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @slot footer - The drawer's footer, usually one or more buttons representing various options\n *\n * @part base - The component's base wrapper\n * @part overlay - The overlay that covers the screen behind the drawer\n * @part panel - The drawer's panel (where the drawer and its content are rendered)\n * @part header - The drawer's header. This element wraps the title and header actions\n * @part header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @part title - The drawer's title\n * @part close-button - The close button, an `<nano-icon-button>`\n * @part close-button__base - The close button's exported `base` part\n * @part body - The drawer's body\n * @part footer - The drawer's footer\n */\n\n@Component({\n  tag: 'nano-drawer',\n  shadow: true,\n  styleUrl: 'drawer.scss',\n})\nexport class Drawer implements ComponentInterface {\n  // Private State\n\n  @Element() host: HTMLNanoDrawerElement;\n\n  private originalTrigger: HTMLElement | null;\n  private drawer: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n\n  get panel() {\n    return this._panel;\n  }\n  set panel(ele: HTMLElement) {\n    if (this._panel) {\n      this.panel.removeEventListener('animationend', this.handleTransitionEnd);\n    }\n    if (!ele) return;\n\n    ele.addEventListener('transitionend', this.handleTransitionEnd);\n    this._panel = ele;\n  }\n  private _panel: HTMLElement;\n\n  @State() noDismiss = false;\n  @State() hasFooter: boolean;\n\n  // Public API\n\n  /**\n   * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n   */\n  @Prop({ reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @Prop({ reflect: true }) label!: string;\n\n  /** The direction from which the drawer will open. */\n  @Prop({ reflect: true }) placement: 'top' | 'end' | 'bottom' | 'start' =\n    'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this attribute and add `position: relative` to the parent.\n   */\n  @Prop({ reflect: true }) contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop({ reflect: true }) noHeader = false;\n\n  /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */\n  @Prop() storeId?: string;\n\n  /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */\n  @Prop() storeMethod: StorageMethods = 'url-hash';\n\n  /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key  */\n  @Prop() noUserDismiss = false;\n\n  /** Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` */\n  @Prop() hoist = false;\n\n  @Watch('hoist')\n  handleHoistChange() {\n    if (!this.hoist || Array.from(document.body.children).includes(this.host))\n      return;\n    document.body.prepend(this.host);\n  }\n\n  /** Emitted when the drawer opens. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted when the drawer closes. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the drawer closes and all animations are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Emitted after the drawer opens and all animations are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the drawer opens and is ready to receive focus. Calling\n   * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n   */\n  @Event() nanoInitialFocus: EventEmitter;\n\n  /**\n   * Emitted when the user attempts to\n   * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n   * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n   * destructive behavior such as data loss.\n   */\n  @Event() nanoRquestClose: EventEmitter<{\n    source: 'close-button' | 'keyboard' | 'overlay';\n  }>;\n\n  /** Shows the drawer. */\n  @Method()\n  async show() {\n    if (this.open) return undefined;\n\n    this.open = true;\n    return waitForEvent(this.host, 'nanoAfterShow');\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    if (!this.open) return undefined;\n\n    this.open = false;\n    return waitForEvent(this.host, 'nanoAfterHide');\n  }\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const nanoRequestClose = this.nanoRquestClose.emit({ source });\n\n    if (nanoRequestClose.defaultPrevented || this.noUserDismiss) {\n      this.noDismiss = true;\n      setTimeout(() => (this.noDismiss = false), 250);\n      return;\n    }\n\n    this.hide();\n  }\n\n  // Prop Change Handlers\n\n  @Watch('contained')\n  handleNoModalChange() {\n    if (this.open && !this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (this.open && this.contained) {\n      this.modal.deactivate();\n      unlockBodyScrolling(this.host);\n    }\n  }\n\n  @Watch('open')\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.nanoShow.emit();\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      // Lock body scrolling only if the drawer isn't contained\n      if (!this.contained) {\n        this.modal.activate();\n        lockBodyScrolling(this.host);\n      }\n\n      // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n      // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n      // ourselves, and add the attribute back afterwards.\n      const autoFocusTarget = this.host.querySelector('[autofocus]');\n      if (autoFocusTarget) {\n        autoFocusTarget.removeAttribute('autofocus');\n      }\n      this.drawer.hidden = false;\n\n      // Set initial focus\n      requestAnimationFrame(() => {\n        const nanoInitialFocus = this.nanoInitialFocus.emit();\n\n        if (!nanoInitialFocus.defaultPrevented) {\n          // Set focus to the autofocus target and restore the attribute\n          if (autoFocusTarget) {\n            (autoFocusTarget as HTMLInputElement).focus({\n              preventScroll: true,\n            });\n          } else {\n            this.panel.focus({ preventScroll: true });\n          }\n        }\n\n        // Restore the autofocus attribute\n        if (autoFocusTarget) {\n          autoFocusTarget.setAttribute('autofocus', '');\n        }\n      });\n\n      this.nanoAfterShow.emit();\n      return;\n    }\n\n    // Hide\n    this.nanoHide.emit();\n    this.removeOpenListeners();\n\n    if (!this.contained) {\n      this.modal.deactivate();\n      unlockBodyScrolling(this.host);\n    }\n\n    // Restore focus to the original trigger\n    const trigger = this.originalTrigger;\n    if (typeof trigger?.focus === 'function') {\n      setTimeout(() => trigger.focus());\n    }\n  }\n\n  // Event Handling\n\n  private addOpenListeners() {\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Contained drawers aren't modal and don't response to the escape key\n    if (this.contained) {\n      return;\n    }\n\n    if (event.key === 'Escape' && this.modal.isActive() && this.open) {\n      event.stopImmediatePropagation();\n      this.requestClose('keyboard');\n    }\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      event\n        .composedPath()\n        .find((node) => node === this.panel || node === this.overlay)\n    ) {\n      if (!this.open) {\n        this.drawer.hidden = true;\n        // Now that the dialog is hidden, restore the overlay and panel for next time\n        this.overlay.hidden = false;\n        this.panel.hidden = false;\n      }\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  // Component Lifecycle\n\n  connectedCallback() {\n    this.handleHoistChange();\n    this.modal = new Modal(this.host);\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    // Show on init if open\n    if (this.open) this.show();\n    if (this.storeId)\n      ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n  }\n\n  componentDidLoad() {\n    this.drawer.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n\n      if (!this.contained) {\n        this.modal.activate();\n        lockBodyScrolling(this.host);\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div\n        ref={(ele) => (this.drawer = ele)}\n        part=\"base\"\n        class={{\n          drawer: true,\n          'drawer--open': this.open,\n          [`drawer--${this.placement}`]: true,\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--has-footer': hasSlot(this.host, 'footer'),\n          'drawer--has-header': !this.noHeader,\n          'drawer--nodismiss': this.noDismiss,\n        }}\n      >\n        <div\n          ref={(ele) => (this.overlay = ele)}\n          part=\"overlay\"\n          class=\"drawer__overlay\"\n          onClick={() => this.requestClose('overlay')}\n          tabindex=\"-1\"\n        />\n\n        <div\n          ref={(ele) => (this.panel = ele)}\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : undefined}\n          aria-labelledby={!this.noHeader ? 'title' : undefined}\n          tabindex=\"0\"\n        >\n          <div class=\"drawer__main\">\n            {!this.noHeader && (\n              <nano-sticker>\n                <div part=\"header\" class=\"drawer__header\">\n                  <h2 part=\"title\" class=\"drawer__title\" id=\"title\">\n                    {/* If there's no label, use an invisible character to prevent the header from collapsing */}\n                    <slot name=\"label\">\n                      {this.label.length > 0\n                        ? this.label\n                        : String.fromCharCode(65279)}\n                    </slot>\n                  </h2>\n                  <div part=\"header-actions\" class=\"drawer__header-actions\">\n                    <slot name=\"header-actions\" />\n\n                    {!this.noUserDismiss && (\n                      <nano-icon-button\n                        part=\"close-button\"\n                        exportparts=\"base:close-button__base\"\n                        class=\"drawer__close\"\n                        iconName=\"light/times\"\n                        label=\"Close\"\n                        onClick={() => this.requestClose('close-button')}\n                      />\n                    )}\n                  </div>\n                </div>\n              </nano-sticker>\n            )}\n\n            <div part=\"body\" class=\"drawer__body\">\n              <slot />\n            </div>\n\n            <nano-sticker position=\"bottom\">\n              <footer part=\"footer\" class=\"drawer__footer\">\n                <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n              </footer>\n            </nano-sticker>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/nano-dropdown.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as i,c as t,h as e,g as s}from"./index-9695db0a.js";import{g as o}from"./active-element-75b7c8a0.js";import{P as n}from"./popover-e5e7a641.js";import{a as r}from"./tabbable-26a66a22.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:auto;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--menu-height:var(--max-menu-height, 50vh);display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;min-block-size:20px;overflow:var(--overflow);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";let h=0;const d=class{constructor(e){i(this,e);this.nanoShow=t(this,"nanoShow",7);this.nanoAfterShow=t(this,"nanoAfterShow",7);this.nanoHide=t(this,"nanoHide",7);this.nanoAfterHide=t(this,"nanoAfterHide",7);this.dropdownId=`dropdown-${h++}`;this.labelId=this.dropdownId+"-title";this.ignoreOpenWatcher=false;this.didLoad=false;this.togglePanel=()=>{if(!this.autoOpen)return;this.open?this.hide():this.show()};this.handleTriggerKeyDown=i=>{if(["ArrowDown","ArrowUp"," "].includes(i.key)){this.show();i.preventDefault();i.stopPropagation();if(this.menu)this.menu.setFocus()}};this.handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};this.autoOpen=true;this.open=false;this.closeOnSelect=true;this.containingElement=undefined;this.tetherTo=null;this.placement="bottom-start";this.distance=2;this.skidding=0;this.hoist=false;this.dialogTitle=undefined;this.eventType=undefined}get menu(){return this.host.querySelector("nano-menu")}handleOpenChange(){if(this.ignoreOpenWatcher)return;this.open?this.show():this.hide();if(this.accessibleTrigger){this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString());return}this.updateAccessibleTrigger()}handleTetherToChange(){this.createPopover();this.updateAccessibleTrigger()}handlePopoverOptionsChange(){if(!this.popover)return;this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}secondaryOpen(i){if(!i.detail.secondaryMenu)return;i.stopPropagation();this.panel.classList.add("loading");this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:true});this.panel.style.minHeight=i.detail.secondaryMenu.scrollHeight+"px"}secondaryClose(i){if(!i.detail.secondaryMenu)return;i.stopPropagation();if(!i.target.parentElement)return;this.panel.style.minHeight=i.target.parentElement.scrollHeight+"px"}handlePanelSelect(i){const t=i.target;if(this.closeOnSelect&&t.tagName.toLowerCase()==="nano-menu")this.hide()}async show(){var i;this.ignoreOpenWatcher=true;this.open=true;const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return}if(typeof((i=this.positioner)===null||i===void 0?void 0:i.showPopover)==="function"){this.hoist=true;this.popover.show();this.positioner.showPopover()}else{this.popover.show()}this.ignoreOpenWatcher=false;document.addEventListener("mousedown",this.handleDocumentMouseDown);document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){this.ignoreOpenWatcher=true;this.open=false;const i=this.nanoHide.emit();if(i.defaultPrevented){this.open=true;this.ignoreOpenWatcher=false;return}if(this.popover)this.popover.hide();this.ignoreOpenWatcher=false;document.removeEventListener("mousedown",this.handleDocumentMouseDown);document.removeEventListener("keydown",this.handleDocumentKeyDown);if(this.accessibleTrigger&&this.focusEleInDropDwn()){this.accessibleTrigger.focus()}setTimeout((()=>{var i;if(!this.open&&typeof((i=this.positioner)===null||i===void 0?void 0:i.hidePopover)==="function"){this.positioner.hidePopover()}}),300)}focusEleInDropDwn(i){var t;const e=o();if(i&&((t=i.composedPath())===null||t===void 0?void 0:t.length)){const t=i.composedPath().includes(this.containingElement);return!i.composedPath().includes(this.accessibleTrigger)&&t}return e&&e.closest(this.containingElement.tagName.toLowerCase())===this.containingElement&&e!==this.accessibleTrigger}updateAccessibleTrigger(){if(!this.didLoad)return;let i;this.accessibleTrigger=null;if(!this.tetherTo){const t=Array.from(this.host.querySelectorAll('[slot="trigger"]'));i=t.map(r)[0]}else{i=r(this.tetherTo)}if(i){i.setAttribute("aria-haspopup","true");i.setAttribute("aria-expanded",this.open?"true":"false");this.accessibleTrigger=i}}handleDocumentKeyDown(i){if(i.key==="Escape"){this.hide();return}if(i.key==="Tab"){setTimeout((()=>{if(document.activeElement&&document.activeElement.closest(this.containingElement.tagName.toLowerCase())!==this.containingElement){this.hide();return}}))}if(this.menu&&["ArrowDown","ArrowUp"].includes(i.key)){if(!this.open||this.focusEleInDropDwn(i))return;i.preventDefault();this.menu.setFocus();return}const t=i.composedPath();if(this.menu&&t.length&&!t.find((i=>i!==this.menu))){this.menu.dispatchEvent(new KeyboardEvent(i.type,i));return}}handleDocumentMouseDown(i){if(!this.focusEleInDropDwn(i)){this.hide();return}}createPopover(){if(!this.tetherTo&&!this.trigger||!this.positioner)return;if(this.popover){if(this.open)this.hide();this.popover.destroy();this.popover=null}this.popover=new n(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit(),onTransitionEnd:()=>{if(!this.open){this.panel.scrollTop=0}else if(this.menu){this.menu.showActiveElement()}}});if(this.open){this.show()}}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);if(!this.containingElement)this.containingElement=this.host}componentDidLoad(){this.didLoad=true;this.createPopover();setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){if(this.host.isConnected)this.hide();if(this.popover)this.popover.destroy()}render(){return e("div",{part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open}},e("span",{part:"trigger",class:"dropdown__trigger",ref:i=>this.trigger=i,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},e("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),e("div",{ref:i=>this.positioner=i,class:"dropdown__positioner",popover:"manual",id:this.dropdownId+"-positioner"},e("div",{ref:i=>this.panel=i,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:this.host.getAttribute("role")==="group"?"group":"dialog","aria-modal":this.host.getAttribute("role")==="group"?undefined:"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&e("span",{id:this.labelId,class:"dropdown__accessible-title","aria-live":this.host.getAttribute("role")==="group"?undefined:"polite"},this.dialogTitle),e("slot",null))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};d.style=a;export{d as nano_dropdown};
+import{r as i,c as t,h as e,g as s}from"./index-9695db0a.js";import{g as o}from"./active-element-75b7c8a0.js";import{P as n}from"./popover-e5e7a641.js";import{a as r}from"./tabbable-26a66a22.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:auto;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--menu-height:var(--max-menu-height, 50vh);display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;min-block-size:20px;overflow:var(--overflow);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";let a=0;const d=class{constructor(e){i(this,e);this.nanoShow=t(this,"nanoShow",7);this.nanoAfterShow=t(this,"nanoAfterShow",7);this.nanoHide=t(this,"nanoHide",7);this.nanoAfterHide=t(this,"nanoAfterHide",7);this.dropdownId=`dropdown-${a++}`;this.labelId=this.dropdownId+"-title";this.ignoreOpenWatcher=false;this.didLoad=false;this.togglePanel=()=>{if(!this.autoOpen)return;this.open?this.hide():this.show()};this.handleTriggerKeyDown=i=>{if(["ArrowDown","ArrowUp"," "].includes(i.key)){this.show();i.preventDefault();i.stopPropagation();if(this.menu)this.menu.setFocus()}};this.handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};this.autoOpen=true;this.open=false;this.closeOnSelect=true;this.containingElement=undefined;this.tetherTo=null;this.placement="bottom-start";this.distance=2;this.skidding=0;this.hoist=false;this.dialogTitle=undefined;this.eventType=undefined}get menu(){return this.host.querySelector("nano-menu")}handleOpenChange(){if(this.ignoreOpenWatcher)return;this.open?this.show():this.hide();if(this.accessibleTrigger){this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString());return}this.updateAccessibleTrigger()}handleTetherToChange(){this.createPopover();this.updateAccessibleTrigger()}handlePopoverOptionsChange(){if(!this.popover)return;this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}secondaryOpen(i){if(!i.detail.secondaryMenu)return;i.stopPropagation();this.panel.classList.add("loading");this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:true});this.panel.style.minHeight=i.detail.secondaryMenu.scrollHeight+"px"}secondaryClose(i){if(!i.detail.secondaryMenu)return;i.stopPropagation();if(!i.target.parentElement)return;this.panel.style.minHeight=i.target.parentElement.scrollHeight+"px"}handlePanelSelect(i){const t=i.target;if(this.closeOnSelect&&t.tagName.toLowerCase()==="nano-menu")this.hide()}async show(){this.ignoreOpenWatcher=true;this.open=true;const i=this.nanoShow.emit();if(i.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return}if(typeof this.positioner?.showPopover==="function"){this.hoist=true;this.popover.show();this.positioner.showPopover()}else{this.popover.show()}this.ignoreOpenWatcher=false;document.addEventListener("mousedown",this.handleDocumentMouseDown);document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){this.ignoreOpenWatcher=true;this.open=false;const i=this.nanoHide.emit();if(i.defaultPrevented){this.open=true;this.ignoreOpenWatcher=false;return}if(this.popover)this.popover.hide();this.ignoreOpenWatcher=false;document.removeEventListener("mousedown",this.handleDocumentMouseDown);document.removeEventListener("keydown",this.handleDocumentKeyDown);if(this.accessibleTrigger&&this.focusEleInDropDwn()){this.accessibleTrigger.focus()}setTimeout((()=>{if(!this.open&&typeof this.positioner?.hidePopover==="function"){this.positioner.hidePopover()}}),300)}focusEleInDropDwn(i){const t=o();if(i&&i.composedPath()?.length){const t=i.composedPath().includes(this.containingElement);if(t)return t;return i.composedPath().includes(this.accessibleTrigger)}return t&&t.closest(this.containingElement.tagName.toLowerCase())===this.containingElement&&t!==this.accessibleTrigger}updateAccessibleTrigger(){if(!this.didLoad)return;let i;this.accessibleTrigger=null;if(!this.tetherTo){const t=Array.from(this.host.querySelectorAll('[slot="trigger"]'));i=t.map(r)[0]}else{i=r(this.tetherTo)}if(i){i.setAttribute("aria-haspopup","true");i.setAttribute("aria-expanded",this.open?"true":"false");this.accessibleTrigger=i}}handleDocumentKeyDown(i){if(i.key==="Escape"){this.hide();return}if(i.key==="Tab"){setTimeout((()=>{if(document.activeElement&&document.activeElement.closest(this.containingElement.tagName.toLowerCase())!==this.containingElement){this.hide();return}}))}if(this.menu&&["ArrowDown","ArrowUp"].includes(i.key)){if(!this.open||this.focusEleInDropDwn(i))return;i.preventDefault();this.menu.setFocus();return}const t=i.composedPath();if(this.menu&&t.length&&!t.find((i=>i!==this.menu))){this.menu.dispatchEvent(new KeyboardEvent(i.type,i));return}}handleDocumentMouseDown(i){if(!this.focusEleInDropDwn(i)){this.hide();return}}createPopover(){if(!this.tetherTo&&!this.trigger||!this.positioner)return;if(this.popover){if(this.open)this.hide();this.popover.destroy();this.popover=null}this.popover=new n(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit(),onTransitionEnd:()=>{if(!this.open){this.panel.scrollTop=0}else if(this.menu){this.menu.showActiveElement()}}});if(this.open){this.show()}}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);if(!this.containingElement)this.containingElement=this.host}componentDidLoad(){this.didLoad=true;this.createPopover();setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){if(this.host.isConnected)this.hide();if(this.popover)this.popover.destroy()}render(){return e("div",{part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open}},e("span",{part:"trigger",class:"dropdown__trigger",ref:i=>this.trigger=i,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},e("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),e("div",{ref:i=>this.positioner=i,class:"dropdown__positioner",popover:"manual",id:this.dropdownId+"-positioner"},e("div",{ref:i=>this.panel=i,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:this.host.getAttribute("role")==="group"?"group":"dialog","aria-modal":this.host.getAttribute("role")==="group"?undefined:"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&e("span",{id:this.labelId,class:"dropdown__accessible-title","aria-live":this.host.getAttribute("role")==="group"?undefined:"polite"},this.dialogTitle),e("slot",null))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};d.style=h;export{d as nano_dropdown};
 //# sourceMappingURL=nano-dropdown.entry.js.map

package/dist/nano-components/nano-dropdown.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["dropdownCss","dropDownIds","Dropdown","this","dropdownId","labelId","ignoreOpenWatcher","didLoad","togglePanel","autoOpen","open","hide","show","handleTriggerKeyDown","event","includes","key","preventDefault","stopPropagation","menu","setFocus","handleTriggerSlotChange","updateAccessibleTrigger","host","querySelector","handleOpenChange","accessibleTrigger","setAttribute","toString","handleTetherToChange","createPopover","handlePopoverOptionsChange","popover","setOptions","strategy","hoist","placement","skidding","distance","secondaryOpen","ev","detail","secondaryMenu","panel","classList","add","addEventListener","remove","once","style","minHeight","scrollHeight","secondaryClose","target","parentElement","handlePanelSelect","closeOnSelect","tagName","toLowerCase","async","nanoShow","emit","defaultPrevented","_a","positioner","showPopover","document","handleDocumentMouseDown","handleDocumentKeyDown","nanoHide","removeEventListener","focusEleInDropDwn","focus","setTimeout","hidePopover","e","activeElement","getActiveElement","composedPath","length","ddInPath","containingElement","closest","tetherTo","assignedElements","Array","from","querySelectorAll","map","getNearestTabbableElement","ePath","find","el","dispatchEvent","KeyboardEvent","type","trigger","destroy","Popover","transitionElement","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","onTransitionEnd","scrollTop","showActiveElement","connectedCallback","bind","componentDidLoad","disconnectedCallback","isConnected","render","h","part","id","class","dropdown","ref","onKeyDown","onClick","name","onSlotchange","split","join","role","getAttribute","undefined","dialogTitle"],"sources":["./src/components/dropdown/dropdown.scss?tag=nano-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --width: width of the dropdown. Defaults to 'auto'\n   * @prop --border: Defaults to #{$layer-border-style}\n   * @prop --border-radius: Defaults to #{$layer-bg-color};\n   * @prop --background: Defaults to #{$layer-bg-color};\n   * @prop --padding: padding of the drop down. Default to '10px 0';\n   * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overidden;\n   * @prop --dropdown-z-index: Defaults to #{$layer-index-dropdown};\n   * @prop --min-width: Defaults to 0;\n   * @prop --box-shadow: #{$layer-shadow-large};\n   * @prop --max-menu-height: max height of a slotted menu. defaults to 50vh\n   */\n\n  --width: auto;\n  --border: #{$layer-border-style};\n  --border-radius: #{$layer-border-radius};\n  --background: #{$layer-bg-color};\n  --padding: 10px 0;\n  --overflow: auto;\n  --dropdown-z-index: #{$layer-index-dropdown};\n  --min-width: 0;\n  --box-shadow: #{$layer-shadow-large};\n  --menu-height: var(--max-menu-height, 50vh);\n\n  display: flex;\n}\n\n.dropdown {\n  position: relative;\n\n  &__trigger {\n    display: block;\n  }\n\n  &__positioner {\n    position: absolute;\n    z-index: var(--dropdown-z-index);\n    min-inline-size: var(--min-width);\n    border: 0;\n    background: none;\n    padding: 0;\n    overflow: visible;\n    color: unset;\n\n    &::backdrop { display: none; }\n\n    &[popover],\n    &:popover-open {\n      inset: unset;\n    }\n\n    @media (max-width: 35.9375em) {\n      z-index: 100;\n    }\n  }\n\n  &__panel {\n    padding: var(--padding);\n    background: var(--background);\n    min-inline-size: var(--min-width);\n    inline-size: var(--width);\n    border: var(--border);\n    border-radius: var(--border-radius);\n    color: currentcolor;\n    box-shadow: var(--box-shadow);\n    opacity: 0;\n    transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;\n    min-block-size: 20px;\n    overflow: var(--overflow);\n    box-sizing: content-box !important;\n\n    &.loading {\n      overflow-y: hidden;\n    }\n\n    &.top {\n      transform: translateY(-20px) translateZ(0);\n    }\n\n    &.bottom {\n      transform: translateY(20px) translateZ(0);\n    }\n\n    .dropdown__positioner.popover-visible & {\n      opacity: 1;\n      transform: translateY(0) translateZ(0);\n    }\n\n    ::slotted(nano-menu) {\n      max-block-size: var(--menu-height);\n    }\n  }\n\n  &__accessible-title {\n    @include visually-hide();\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  Method,\n  Prop,\n  Watch,\n  h,\n  Listen,\n  ComponentInterface,\n  EventEmitter,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport Popover, { PopoverPlacement } from '../../utils/popover';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\nimport type { NavItemEventDetail } from '../../interface';\n\nlet dropDownIds = 0;\n\n/**\n * Dropdowns show additional content in a panel.\n * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).\n * @slot trigger - The dropdown's trigger.\n * @slot - The dropdown's content.\n */\n@Component({\n  tag: 'nano-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  private dropdownId = `dropdown-${dropDownIds++}`;\n  private labelId = this.dropdownId + '-title';\n  private ignoreOpenWatcher = false;\n  private panel: HTMLElement;\n  private popover: Popover;\n  private trigger: HTMLElement;\n  private positioner: HTMLElement;\n  private accessibleTrigger: HTMLElement;\n  private didLoad = false;\n  private get menu() {\n    return this.host.querySelector('nano-menu') as HTMLNanoMenuElement;\n  }\n\n  @Element() host: HTMLNanoDropdownElement;\n\n  /** Determines if the dropdown should open automatically when the trigger is clicked */\n  @Prop() autoOpen = true;\n\n  /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (this.ignoreOpenWatcher) return;\n\n    this.open ? this.show() : this.hide();\n\n    if (this.accessibleTrigger) {\n      this.accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open.toString()\n      );\n      return;\n    }\n\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * Determines whether the dropdown should hide when a menu item is selected.\n   */\n  @Prop() closeOnSelect = true;\n\n  /**\n   * The dropdown will close when the user interacts outside of this element (e.g. clicking).\n   */\n  @Prop({ mutable: true }) containingElement: HTMLElement;\n\n  /**\n   * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\n   * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)\n   */\n  @Prop() tetherTo: HTMLElement = null;\n\n  @Watch('tetherTo')\n  handleTetherToChange() {\n    this.createPopover();\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside of the viewport.\n   */\n  @Prop() placement: PopoverPlacement = 'bottom-start';\n\n  /**\n   * The distance in pixels from which to offset the panel away from its trigger.\n   */\n  @Prop() distance = 2;\n\n  /**\n   * The distance in pixels from which to offset the panel along its trigger.\n   */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop({ mutable: true }) hoist = false;\n\n  @Watch('placement')\n  @Watch('distance')\n  @Watch('skidding')\n  @Watch('hoist')\n  handlePopoverOptionsChange() {\n    if (!this.popover) return;\n\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      skidding: this.skidding,\n      distance: this.distance,\n    });\n  }\n\n  /**\n   * Title used to describe the dropdown content for accessibility\n   */\n  @Prop() dialogTitle!: string;\n\n  // Events\n\n  /**\n   * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the dropdown opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the dropdown closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // this is a massive hack to make stencil expose the `EventEmitter` type in the final build\n  // because the `Dropdown` class is used as a type in `nano-datalist`\n  /** @internal */\n  @Prop() eventType: EventEmitter;\n\n  // Listeners\n\n  @Listen('nanoOpen')\n  secondaryOpen(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n\n    this.panel.classList.add('loading');\n    this.panel.addEventListener(\n      'transitionend',\n      () => {\n        this.panel.classList.remove('loading');\n      },\n      { once: true }\n    );\n\n    this.panel.style.minHeight =\n      (ev.detail as NavItemEventDetail).secondaryMenu.scrollHeight + 'px';\n  }\n\n  @Listen('nanoClose')\n  secondaryClose(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n    if (!(ev.target as HTMLElement).parentElement) return;\n    this.panel.style.minHeight =\n      (ev.target as HTMLElement).parentElement.scrollHeight + 'px';\n  }\n\n  @Listen('nanoSelect')\n  handlePanelSelect(event: CustomEvent) {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')\n      this.hide();\n  }\n\n  // Methods\n\n  /** Shows the dropdown panel */\n  @Method()\n  async show() {\n    this.ignoreOpenWatcher = true;\n    this.open = true;\n\n    const nanoShow = this.nanoShow.emit();\n\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    // @ts-ignore\n    if (typeof this.positioner?.showPopover === 'function') {\n      this.hoist = true;\n      this.popover.show();\n      // @ts-ignore\n      this.positioner.showPopover();\n    } else {\n      this.popover.show();\n    }\n\n    this.ignoreOpenWatcher = false;\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  /** Hides the dropdown panel */\n  @Method()\n  async hide() {\n    this.ignoreOpenWatcher = true;\n    this.open = false;\n\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    if (this.popover) this.popover.hide();\n    this.ignoreOpenWatcher = false;\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n    if (this.accessibleTrigger && this.focusEleInDropDwn()) {\n      this.accessibleTrigger.focus();\n    }\n\n    setTimeout(() => {\n      // @ts-ignore\n      if (!this.open && typeof this.positioner?.hidePopover === 'function') {\n        // @ts-ignore\n        this.positioner.hidePopover();\n      }\n    }, 300);\n  }\n\n  // Private methods\n\n  /**\n   * Decides if the current active element or element\n   * connected to the current event is connected to the Dropdown\n   * @param e\n   * @returns whether the current focus is within the dropdown\n   */\n  private focusEleInDropDwn(e?: Event) {\n    const activeElement = getActiveElement();\n\n    if (e && e.composedPath()?.length) {\n      const ddInPath = e.composedPath().includes(this.containingElement);\n      return !e.composedPath().includes(this.accessibleTrigger) && ddInPath;\n    }\n\n    return (\n      activeElement &&\n      activeElement.closest(this.containingElement.tagName.toLowerCase()) ===\n        this.containingElement &&\n      activeElement !== this.accessibleTrigger\n    );\n  }\n\n  private togglePanel = () => {\n    if (!this.autoOpen) return;\n    this.open ? this.hide() : this.show();\n  };\n\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  private updateAccessibleTrigger() {\n    if (!this.didLoad) return;\n\n    let accessibleTrigger: HTMLElement;\n    this.accessibleTrigger = null;\n\n    if (!this.tetherTo) {\n      const assignedElements = Array.from(\n        this.host.querySelectorAll('[slot=\"trigger\"]')\n      );\n      accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];\n    } else {\n      accessibleTrigger = getNearestTabbableElement(this.tetherTo);\n    }\n\n    if (accessibleTrigger) {\n      accessibleTrigger.setAttribute('aria-haspopup', 'true');\n      accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open ? 'true' : 'false'\n      );\n      this.accessibleTrigger = accessibleTrigger;\n    }\n  }\n\n  // Handlers\n\n  private handleDocumentKeyDown(event: KeyboardEvent) {\n    // Close when escape is pressed\n    if (event.key === 'Escape') {\n      this.hide();\n      return;\n    }\n\n    // Close when tabbing results in the focus leaving the close element\n    if (event.key === 'Tab') {\n      setTimeout(() => {\n        if (\n          document.activeElement &&\n          document.activeElement.closest(\n            this.containingElement.tagName.toLowerCase()\n          ) !== this.containingElement\n        ) {\n          this.hide();\n          return;\n        }\n      });\n    }\n\n    // If a menu is present, focus on it when certain keys are pressed\n    if (this.menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      // must have menu item, must have pressed down, must be open and must not have focus within dd\n      if (!this.open || this.focusEleInDropDwn(event)) return;\n      event.preventDefault();\n      this.menu.setFocus();\n      return;\n    }\n\n    // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)\n    const ePath = event.composedPath();\n    if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {\n      this.menu.dispatchEvent(new KeyboardEvent(event.type, event));\n      return;\n    }\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    // Close when clicking outside of the close element\n    if (!this.focusEleInDropDwn(event)) {\n      this.hide();\n      return;\n    }\n  }\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    // Open the panel when pressing down or up while focused on the trigger\n    if (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {\n      this.show();\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (this.menu) this.menu.setFocus();\n    }\n  };\n\n  private handleTriggerSlotChange = () => {\n    this.updateAccessibleTrigger();\n  };\n\n  private createPopover() {\n    if ((!this.tetherTo && !this.trigger) || !this.positioner) return;\n\n    if (this.popover) {\n      if (this.open) this.hide();\n      this.popover.destroy();\n      this.popover = null;\n    }\n\n    this.popover = new Popover(this.tetherTo || this.trigger, this.positioner, {\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.panel,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n      onTransitionEnd: () => {\n        if (!this.open) {\n          this.panel.scrollTop = 0;\n        } else if (this.menu) {\n          this.menu.showActiveElement();\n        }\n      },\n    });\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  // Stencil hooks\n\n  connectedCallback() {\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n\n    if (!this.containingElement) this.containingElement = this.host;\n  }\n\n  componentDidLoad() {\n    this.didLoad = true;\n    this.createPopover();\n    setTimeout(() => this.updateAccessibleTrigger(), 100);\n  }\n\n  disconnectedCallback() {\n    if (this.host.isConnected) this.hide();\n    if (this.popover) this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        id={this.dropdownId}\n        class={{\n          dropdown: true,\n          'dropdown--open': this.open,\n        }}\n      >\n        <span\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          ref={(el) => (this.trigger = el)}\n          onKeyDown={this.handleTriggerKeyDown}\n          onClick={this.togglePanel}\n        >\n          <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n        </span>\n\n        <div\n          ref={(el) => (this.positioner = el)}\n          class=\"dropdown__positioner\"\n          // @ts-ignore\n          popover=\"manual\"\n          id={this.dropdownId + '-positioner'}\n        >\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class={`dropdown__panel ${this.placement.split('-').join(' ')}`}\n            aria-hidden={!this.open}\n            role={\n              this.host.getAttribute('role') === 'group' ? 'group' : 'dialog'\n            }\n            aria-modal={\n              this.host.getAttribute('role') === 'group' ? undefined : 'true'\n            }\n            aria-labelledby={this.dialogTitle ? this.labelId : undefined}\n          >\n            {this.dialogTitle && (\n              <span\n                id={this.labelId}\n                class=\"dropdown__accessible-title\"\n                aria-live={\n                  this.host.getAttribute('role') === 'group'\n                    ? undefined\n                    : 'polite'\n                }\n              >\n                {this.dialogTitle}\n              </span>\n            )}\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":";;;mMAAA,MAAMA,EAAc,w5DCiBpB,IAAIC,EAAc,E,MAaLC,EAAQ,M,yLACXC,KAAAC,WAAa,YAAYH,MACzBE,KAAAE,QAAUF,KAAKC,WAAa,SAC5BD,KAAAG,kBAAoB,MAMpBH,KAAAI,QAAU,MAuPVJ,KAAAK,YAAc,KACpB,IAAKL,KAAKM,SAAU,OACpBN,KAAKO,KAAOP,KAAKQ,OAASR,KAAKS,MAAM,EAgF/BT,KAAAU,qBAAwBC,IAE9B,GAAI,CAAC,YAAa,UAAW,KAAKC,SAASD,EAAME,KAAM,CACrDb,KAAKS,OACLE,EAAMG,iBACNH,EAAMI,kBAEN,GAAIf,KAAKgB,KAAMhB,KAAKgB,KAAKC,U,GAIrBjB,KAAAkB,wBAA0B,KAChClB,KAAKmB,yBAAyB,E,cA7Ub,K,UAG4B,M,mBAsBvB,K,+CAWQ,K,eAYM,e,cAKnB,E,cAKA,E,WAMc,M,oDAvErBH,WACV,OAAOhB,KAAKoB,KAAKC,cAAc,Y,CAYjCC,mBACE,GAAItB,KAAKG,kBAAmB,OAE5BH,KAAKO,KAAOP,KAAKS,OAAST,KAAKQ,OAE/B,GAAIR,KAAKuB,kBAAmB,CAC1BvB,KAAKuB,kBAAkBC,aACrB,gBACAxB,KAAKO,KAAKkB,YAEZ,M,CAGFzB,KAAKmB,yB,CAoBPO,uBACE1B,KAAK2B,gBACL3B,KAAKmB,yB,CA6BPS,6BACE,IAAK5B,KAAK6B,QAAS,OAEnB7B,KAAK6B,QAAQC,WAAW,CACtBC,SAAU/B,KAAKgC,MAAQ,QAAU,WACjCC,UAAWjC,KAAKiC,UAChBC,SAAUlC,KAAKkC,SACfC,SAAUnC,KAAKmC,U,CAuCnBC,cAAcC,GACZ,IAAMA,EAAGC,OAA8BC,cAAe,OACtDF,EAAGtB,kBAEHf,KAAKwC,MAAMC,UAAUC,IAAI,WACzB1C,KAAKwC,MAAMG,iBACT,iBACA,KACE3C,KAAKwC,MAAMC,UAAUG,OAAO,UAAU,GAExC,CAAEC,KAAM,OAGV7C,KAAKwC,MAAMM,MAAMC,UACdV,EAAGC,OAA8BC,cAAcS,aAAe,I,CAInEC,eAAeZ,GACb,IAAMA,EAAGC,OAA8BC,cAAe,OACtDF,EAAGtB,kBACH,IAAMsB,EAAGa,OAAuBC,cAAe,OAC/CnD,KAAKwC,MAAMM,MAAMC,UACdV,EAAGa,OAAuBC,cAAcH,aAAe,I,CAI5DI,kBAAkBzC,GAChB,MAAMuC,EAASvC,EAAMuC,OAGrB,GAAIlD,KAAKqD,eAAiBH,EAAOI,QAAQC,gBAAkB,YACzDvD,KAAKQ,M,CAOTgD,a,MACExD,KAAKG,kBAAoB,KACzBH,KAAKO,KAAO,KAEZ,MAAMkD,EAAWzD,KAAKyD,SAASC,OAE/B,GAAID,EAASE,iBAAkB,CAC7B3D,KAAKO,KAAO,MACZP,KAAKG,kBAAoB,MACzB,M,CAIF,WAAWyD,EAAA5D,KAAK6D,cAAU,MAAAD,SAAA,SAAAA,EAAEE,eAAgB,WAAY,CACtD9D,KAAKgC,MAAQ,KACbhC,KAAK6B,QAAQpB,OAEbT,KAAK6D,WAAWC,a,KACX,CACL9D,KAAK6B,QAAQpB,M,CAGfT,KAAKG,kBAAoB,MACzB4D,SAASpB,iBAAiB,YAAa3C,KAAKgE,yBAC5CD,SAASpB,iBAAiB,UAAW3C,KAAKiE,sB,CAK5CT,aACExD,KAAKG,kBAAoB,KACzBH,KAAKO,KAAO,MAEZ,MAAM2D,EAAWlE,KAAKkE,SAASR,OAE/B,GAAIQ,EAASP,iBAAkB,CAC7B3D,KAAKO,KAAO,KACZP,KAAKG,kBAAoB,MACzB,M,CAGF,GAAIH,KAAK6B,QAAS7B,KAAK6B,QAAQrB,OAC/BR,KAAKG,kBAAoB,MAEzB4D,SAASI,oBAAoB,YAAanE,KAAKgE,yBAC/CD,SAASI,oBAAoB,UAAWnE,KAAKiE,uBAE7C,GAAIjE,KAAKuB,mBAAqBvB,KAAKoE,oBAAqB,CACtDpE,KAAKuB,kBAAkB8C,O,CAGzBC,YAAW,K,MAET,IAAKtE,KAAKO,cAAeqD,EAAA5D,KAAK6D,cAAU,MAAAD,SAAA,SAAAA,EAAEW,eAAgB,WAAY,CAEpEvE,KAAK6D,WAAWU,a,IAEjB,I,CAWGH,kBAAkBI,G,MACxB,MAAMC,EAAgBC,IAEtB,GAAIF,KAAKZ,EAAAY,EAAEG,kBAAc,MAAAf,SAAA,SAAAA,EAAEgB,QAAQ,CACjC,MAAMC,EAAWL,EAAEG,eAAe/D,SAASZ,KAAK8E,mBAChD,OAAQN,EAAEG,eAAe/D,SAASZ,KAAKuB,oBAAsBsD,C,CAG/D,OACEJ,GACAA,EAAcM,QAAQ/E,KAAK8E,kBAAkBxB,QAAQC,iBACnDvD,KAAK8E,mBACPL,IAAkBzE,KAAKuB,iB,CAYnBJ,0BACN,IAAKnB,KAAKI,QAAS,OAEnB,IAAImB,EACJvB,KAAKuB,kBAAoB,KAEzB,IAAKvB,KAAKgF,SAAU,CAClB,MAAMC,EAAmBC,MAAMC,KAC7BnF,KAAKoB,KAAKgE,iBAAiB,qBAE7B7D,EAAoB0D,EAAiBI,IAAIC,GAA2B,E,KAC/D,CACL/D,EAAoB+D,EAA0BtF,KAAKgF,S,CAGrD,GAAIzD,EAAmB,CACrBA,EAAkBC,aAAa,gBAAiB,QAChDD,EAAkBC,aAChB,gBACAxB,KAAKO,KAAO,OAAS,SAEvBP,KAAKuB,kBAAoBA,C,EAMrB0C,sBAAsBtD,GAE5B,GAAIA,EAAME,MAAQ,SAAU,CAC1Bb,KAAKQ,OACL,M,CAIF,GAAIG,EAAME,MAAQ,MAAO,CACvByD,YAAW,KACT,GACEP,SAASU,eACTV,SAASU,cAAcM,QACrB/E,KAAK8E,kBAAkBxB,QAAQC,iBAC3BvD,KAAK8E,kBACX,CACA9E,KAAKQ,OACL,M,KAMN,GAAIR,KAAKgB,MAAQ,CAAC,YAAa,WAAWJ,SAASD,EAAME,KAAM,CAE7D,IAAKb,KAAKO,MAAQP,KAAKoE,kBAAkBzD,GAAQ,OACjDA,EAAMG,iBACNd,KAAKgB,KAAKC,WACV,M,CAIF,MAAMsE,EAAQ5E,EAAMgE,eACpB,GAAI3E,KAAKgB,MAAQuE,EAAMX,SAAWW,EAAMC,MAAMC,GAAOA,IAAOzF,KAAKgB,OAAO,CACtEhB,KAAKgB,KAAK0E,cAAc,IAAIC,cAAchF,EAAMiF,KAAMjF,IACtD,M,EAIIqD,wBAAwBrD,GAE9B,IAAKX,KAAKoE,kBAAkBzD,GAAQ,CAClCX,KAAKQ,OACL,M,EAmBImB,gBACN,IAAM3B,KAAKgF,WAAahF,KAAK6F,UAAa7F,KAAK6D,WAAY,OAE3D,GAAI7D,KAAK6B,QAAS,CAChB,GAAI7B,KAAKO,KAAMP,KAAKQ,OACpBR,KAAK6B,QAAQiE,UACb9F,KAAK6B,QAAU,I,CAGjB7B,KAAK6B,QAAU,IAAIkE,EAAQ/F,KAAKgF,UAAYhF,KAAK6F,QAAS7F,KAAK6D,WAAY,CACzE9B,SAAU/B,KAAKgC,MAAQ,QAAU,WACjCC,UAAWjC,KAAKiC,UAChBE,SAAUnC,KAAKmC,SACfD,SAAUlC,KAAKkC,SACf8D,kBAAmBhG,KAAKwC,MACxByD,YAAa,IAAMjG,KAAKkG,cAAcxC,OACtCyC,YAAa,IAAMnG,KAAKoG,cAAc1C,OACtC2C,gBAAiB,KACf,IAAKrG,KAAKO,KAAM,CACdP,KAAKwC,MAAM8D,UAAY,C,MAClB,GAAItG,KAAKgB,KAAM,CACpBhB,KAAKgB,KAAKuF,mB,KAKhB,GAAIvG,KAAKO,KAAM,CACbP,KAAKS,M,EAMT+F,oBACExG,KAAKiE,sBAAwBjE,KAAKiE,sBAAsBwC,KAAKzG,MAC7DA,KAAKgE,wBAA0BhE,KAAKgE,wBAAwByC,KAAKzG,MAEjE,IAAKA,KAAK8E,kBAAmB9E,KAAK8E,kBAAoB9E,KAAKoB,I,CAG7DsF,mBACE1G,KAAKI,QAAU,KACfJ,KAAK2B,gBACL2C,YAAW,IAAMtE,KAAKmB,2BAA2B,I,CAGnDwF,uBACE,GAAI3G,KAAKoB,KAAKwF,YAAa5G,KAAKQ,OAChC,GAAIR,KAAK6B,QAAS7B,KAAK6B,QAAQiE,S,CAGjCe,SACE,OACEC,EAAA,OACEC,KAAK,OACLC,GAAIhH,KAAKC,WACTgH,MAAO,CACLC,SAAU,KACV,iBAAkBlH,KAAKO,OAGzBuG,EAAA,QACEC,KAAK,UACLE,MAAM,oBACNE,IAAM1B,GAAQzF,KAAK6F,QAAUJ,EAC7B2B,UAAWpH,KAAKU,qBAChB2G,QAASrH,KAAKK,aAEdyG,EAAA,QAAMQ,KAAK,UAAUC,aAAcvH,KAAKkB,2BAG1C4F,EAAA,OACEK,IAAM1B,GAAQzF,KAAK6D,WAAa4B,EAChCwB,MAAM,uBAENpF,QAAQ,SACRmF,GAAIhH,KAAKC,WAAa,eAEtB6G,EAAA,OACEK,IAAM1B,GAAQzF,KAAKwC,MAAQiD,EAC3BsB,KAAK,QACLE,MAAO,mBAAmBjH,KAAKiC,UAAUuF,MAAM,KAAKC,KAAK,OAAM,eACjDzH,KAAKO,KACnBmH,KACE1H,KAAKoB,KAAKuG,aAAa,UAAY,QAAU,QAAU,SAAQ,aAG/D3H,KAAKoB,KAAKuG,aAAa,UAAY,QAAUC,UAAY,OAAM,kBAEhD5H,KAAK6H,YAAc7H,KAAKE,QAAU0H,WAElD5H,KAAK6H,aACJf,EAAA,QACEE,GAAIhH,KAAKE,QACT+G,MAAM,6BAA4B,YAEhCjH,KAAKoB,KAAKuG,aAAa,UAAY,QAC/BC,UACA,UAGL5H,KAAK6H,aAGVf,EAAA,e"}
+{"version":3,"names":["dropdownCss","dropDownIds","Dropdown","this","dropdownId","labelId","ignoreOpenWatcher","didLoad","togglePanel","autoOpen","open","hide","show","handleTriggerKeyDown","event","includes","key","preventDefault","stopPropagation","menu","setFocus","handleTriggerSlotChange","updateAccessibleTrigger","host","querySelector","handleOpenChange","accessibleTrigger","setAttribute","toString","handleTetherToChange","createPopover","handlePopoverOptionsChange","popover","setOptions","strategy","hoist","placement","skidding","distance","secondaryOpen","ev","detail","secondaryMenu","panel","classList","add","addEventListener","remove","once","style","minHeight","scrollHeight","secondaryClose","target","parentElement","handlePanelSelect","closeOnSelect","tagName","toLowerCase","async","nanoShow","emit","defaultPrevented","positioner","showPopover","document","handleDocumentMouseDown","handleDocumentKeyDown","nanoHide","removeEventListener","focusEleInDropDwn","focus","setTimeout","hidePopover","e","activeElement","getActiveElement","composedPath","length","ddInPath","containingElement","closest","tetherTo","assignedElements","Array","from","querySelectorAll","map","getNearestTabbableElement","ePath","find","el","dispatchEvent","KeyboardEvent","type","trigger","destroy","Popover","transitionElement","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","onTransitionEnd","scrollTop","showActiveElement","connectedCallback","bind","componentDidLoad","disconnectedCallback","isConnected","render","h","part","id","class","dropdown","ref","onKeyDown","onClick","name","onSlotchange","split","join","role","getAttribute","undefined","dialogTitle"],"sources":["./src/components/dropdown/dropdown.scss?tag=nano-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --width: width of the dropdown. Defaults to 'auto'\n   * @prop --border: Defaults to #{$layer-border-style}\n   * @prop --border-radius: Defaults to #{$layer-bg-color};\n   * @prop --background: Defaults to #{$layer-bg-color};\n   * @prop --padding: padding of the drop down. Default to '10px 0';\n   * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overidden;\n   * @prop --dropdown-z-index: Defaults to #{$layer-index-dropdown};\n   * @prop --min-width: Defaults to 0;\n   * @prop --box-shadow: #{$layer-shadow-large};\n   * @prop --max-menu-height: max height of a slotted menu. defaults to 50vh\n   */\n\n  --width: auto;\n  --border: #{$layer-border-style};\n  --border-radius: #{$layer-border-radius};\n  --background: #{$layer-bg-color};\n  --padding: 10px 0;\n  --overflow: auto;\n  --dropdown-z-index: #{$layer-index-dropdown};\n  --min-width: 0;\n  --box-shadow: #{$layer-shadow-large};\n  --menu-height: var(--max-menu-height, 50vh);\n\n  display: flex;\n}\n\n.dropdown {\n  position: relative;\n\n  &__trigger {\n    display: block;\n  }\n\n  &__positioner {\n    position: absolute;\n    z-index: var(--dropdown-z-index);\n    min-inline-size: var(--min-width);\n    border: 0;\n    background: none;\n    padding: 0;\n    overflow: visible;\n    color: unset;\n\n    &::backdrop { display: none; }\n\n    &[popover],\n    &:popover-open {\n      inset: unset;\n    }\n\n    @media (max-width: 35.9375em) {\n      z-index: 100;\n    }\n  }\n\n  &__panel {\n    padding: var(--padding);\n    background: var(--background);\n    min-inline-size: var(--min-width);\n    inline-size: var(--width);\n    border: var(--border);\n    border-radius: var(--border-radius);\n    color: currentcolor;\n    box-shadow: var(--box-shadow);\n    opacity: 0;\n    transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;\n    min-block-size: 20px;\n    overflow: var(--overflow);\n    box-sizing: content-box !important;\n\n    &.loading {\n      overflow-y: hidden;\n    }\n\n    &.top {\n      transform: translateY(-20px) translateZ(0);\n    }\n\n    &.bottom {\n      transform: translateY(20px) translateZ(0);\n    }\n\n    .dropdown__positioner.popover-visible & {\n      opacity: 1;\n      transform: translateY(0) translateZ(0);\n    }\n\n    ::slotted(nano-menu) {\n      max-block-size: var(--menu-height);\n    }\n  }\n\n  &__accessible-title {\n    @include visually-hide();\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  Method,\n  Prop,\n  Watch,\n  h,\n  Listen,\n  ComponentInterface,\n  EventEmitter,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport Popover, { PopoverPlacement } from '../../utils/popover';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\nimport type { NavItemEventDetail } from '../../interface';\n\nlet dropDownIds = 0;\n\n/**\n * Dropdowns show additional content in a panel.\n * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).\n * @slot trigger - The dropdown's trigger.\n * @slot - The dropdown's content.\n */\n@Component({\n  tag: 'nano-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  private dropdownId = `dropdown-${dropDownIds++}`;\n  private labelId = this.dropdownId + '-title';\n  private ignoreOpenWatcher = false;\n  private panel: HTMLElement;\n  private popover: Popover;\n  private trigger: HTMLElement;\n  private positioner: HTMLElement;\n  private accessibleTrigger: HTMLElement;\n  private didLoad = false;\n  private get menu() {\n    return this.host.querySelector('nano-menu') as HTMLNanoMenuElement;\n  }\n\n  @Element() host: HTMLNanoDropdownElement;\n\n  /** Determines if the dropdown should open automatically when the trigger is clicked */\n  @Prop() autoOpen = true;\n\n  /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (this.ignoreOpenWatcher) return;\n\n    this.open ? this.show() : this.hide();\n\n    if (this.accessibleTrigger) {\n      this.accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open.toString()\n      );\n      return;\n    }\n\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * Determines whether the dropdown should hide when a menu item is selected.\n   */\n  @Prop() closeOnSelect = true;\n\n  /**\n   * The dropdown will close when the user interacts outside of this element (e.g. clicking).\n   */\n  @Prop({ mutable: true }) containingElement: HTMLElement;\n\n  /**\n   * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\n   * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)\n   */\n  @Prop() tetherTo: HTMLElement = null;\n\n  @Watch('tetherTo')\n  handleTetherToChange() {\n    this.createPopover();\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside of the viewport.\n   */\n  @Prop() placement: PopoverPlacement = 'bottom-start';\n\n  /**\n   * The distance in pixels from which to offset the panel away from its trigger.\n   */\n  @Prop() distance = 2;\n\n  /**\n   * The distance in pixels from which to offset the panel along its trigger.\n   */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop({ mutable: true }) hoist = false;\n\n  @Watch('placement')\n  @Watch('distance')\n  @Watch('skidding')\n  @Watch('hoist')\n  handlePopoverOptionsChange() {\n    if (!this.popover) return;\n\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      skidding: this.skidding,\n      distance: this.distance,\n    });\n  }\n\n  /**\n   * Title used to describe the dropdown content for accessibility\n   */\n  @Prop() dialogTitle!: string;\n\n  // Events\n\n  /**\n   * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the dropdown opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the dropdown closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // this is a massive hack to make stencil expose the `EventEmitter` type in the final build\n  // because the `Dropdown` class is used as a type in `nano-datalist`\n  /** @internal */\n  @Prop() eventType: EventEmitter;\n\n  // Listeners\n\n  @Listen('nanoOpen')\n  secondaryOpen(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n\n    this.panel.classList.add('loading');\n    this.panel.addEventListener(\n      'transitionend',\n      () => {\n        this.panel.classList.remove('loading');\n      },\n      { once: true }\n    );\n\n    this.panel.style.minHeight =\n      (ev.detail as NavItemEventDetail).secondaryMenu.scrollHeight + 'px';\n  }\n\n  @Listen('nanoClose')\n  secondaryClose(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n    if (!(ev.target as HTMLElement).parentElement) return;\n    this.panel.style.minHeight =\n      (ev.target as HTMLElement).parentElement.scrollHeight + 'px';\n  }\n\n  @Listen('nanoSelect')\n  handlePanelSelect(event: CustomEvent) {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')\n      this.hide();\n  }\n\n  // Methods\n\n  /** Shows the dropdown panel */\n  @Method()\n  async show() {\n    this.ignoreOpenWatcher = true;\n    this.open = true;\n\n    const nanoShow = this.nanoShow.emit();\n\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    // @ts-ignore\n    if (typeof this.positioner?.showPopover === 'function') {\n      this.hoist = true;\n      this.popover.show();\n      // @ts-ignore\n      this.positioner.showPopover();\n    } else {\n      this.popover.show();\n    }\n\n    this.ignoreOpenWatcher = false;\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  /** Hides the dropdown panel */\n  @Method()\n  async hide() {\n    this.ignoreOpenWatcher = true;\n    this.open = false;\n\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    if (this.popover) this.popover.hide();\n    this.ignoreOpenWatcher = false;\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n    if (this.accessibleTrigger && this.focusEleInDropDwn()) {\n      this.accessibleTrigger.focus();\n    }\n\n    setTimeout(() => {\n      // @ts-ignore\n      if (!this.open && typeof this.positioner?.hidePopover === 'function') {\n        // @ts-ignore\n        this.positioner.hidePopover();\n      }\n    }, 300);\n  }\n\n  // Private methods\n\n  /**\n   * Decides if the current active element or element\n   * connected to the current event is connected to the Dropdown\n   * @param e\n   * @returns whether the current focus is within the dropdown\n   */\n  private focusEleInDropDwn(e?: Event) {\n    const activeElement = getActiveElement();\n\n    if (e && e.composedPath()?.length) {\n      const ddInPath = e.composedPath().includes(this.containingElement);\n      if (ddInPath) return ddInPath;\n      return e.composedPath().includes(this.accessibleTrigger);\n    }\n\n    return (\n      activeElement &&\n      activeElement.closest(this.containingElement.tagName.toLowerCase()) ===\n        this.containingElement &&\n      activeElement !== this.accessibleTrigger\n    );\n  }\n\n  private togglePanel = () => {\n    if (!this.autoOpen) return;\n    this.open ? this.hide() : this.show();\n  };\n\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  private updateAccessibleTrigger() {\n    if (!this.didLoad) return;\n\n    let accessibleTrigger: HTMLElement;\n    this.accessibleTrigger = null;\n\n    if (!this.tetherTo) {\n      const assignedElements = Array.from(\n        this.host.querySelectorAll('[slot=\"trigger\"]')\n      );\n      accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];\n    } else {\n      accessibleTrigger = getNearestTabbableElement(this.tetherTo);\n    }\n\n    if (accessibleTrigger) {\n      accessibleTrigger.setAttribute('aria-haspopup', 'true');\n      accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open ? 'true' : 'false'\n      );\n      this.accessibleTrigger = accessibleTrigger;\n    }\n  }\n\n  // Handlers\n\n  private handleDocumentKeyDown(event: KeyboardEvent) {\n    // Close when escape is pressed\n    if (event.key === 'Escape') {\n      this.hide();\n      return;\n    }\n\n    // Close when tabbing results in the focus leaving the close element\n    if (event.key === 'Tab') {\n      setTimeout(() => {\n        if (\n          document.activeElement &&\n          document.activeElement.closest(\n            this.containingElement.tagName.toLowerCase()\n          ) !== this.containingElement\n        ) {\n          this.hide();\n          return;\n        }\n      });\n    }\n\n    // If a menu is present, focus on it when certain keys are pressed\n    if (this.menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      // must have menu item, must have pressed down, must be open and must not have focus within dd\n      if (!this.open || this.focusEleInDropDwn(event)) return;\n      event.preventDefault();\n      this.menu.setFocus();\n      return;\n    }\n\n    // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)\n    const ePath = event.composedPath();\n    if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {\n      this.menu.dispatchEvent(new KeyboardEvent(event.type, event));\n      return;\n    }\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    // Close when clicking outside of the close element\n    if (!this.focusEleInDropDwn(event)) {\n      this.hide();\n      return;\n    }\n  }\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    // Open the panel when pressing down or up while focused on the trigger\n    if (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {\n      this.show();\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (this.menu) this.menu.setFocus();\n    }\n  };\n\n  private handleTriggerSlotChange = () => {\n    this.updateAccessibleTrigger();\n  };\n\n  private createPopover() {\n    if ((!this.tetherTo && !this.trigger) || !this.positioner) return;\n\n    if (this.popover) {\n      if (this.open) this.hide();\n      this.popover.destroy();\n      this.popover = null;\n    }\n\n    this.popover = new Popover(this.tetherTo || this.trigger, this.positioner, {\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.panel,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n      onTransitionEnd: () => {\n        if (!this.open) {\n          this.panel.scrollTop = 0;\n        } else if (this.menu) {\n          this.menu.showActiveElement();\n        }\n      },\n    });\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  // Stencil hooks\n\n  connectedCallback() {\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n\n    if (!this.containingElement) this.containingElement = this.host;\n  }\n\n  componentDidLoad() {\n    this.didLoad = true;\n    this.createPopover();\n    setTimeout(() => this.updateAccessibleTrigger(), 100);\n  }\n\n  disconnectedCallback() {\n    if (this.host.isConnected) this.hide();\n    if (this.popover) this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        id={this.dropdownId}\n        class={{\n          dropdown: true,\n          'dropdown--open': this.open,\n        }}\n      >\n        <span\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          ref={(el) => (this.trigger = el)}\n          onKeyDown={this.handleTriggerKeyDown}\n          onClick={this.togglePanel}\n        >\n          <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n        </span>\n\n        <div\n          ref={(el) => (this.positioner = el)}\n          class=\"dropdown__positioner\"\n          // @ts-ignore\n          popover=\"manual\"\n          id={this.dropdownId + '-positioner'}\n        >\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class={`dropdown__panel ${this.placement.split('-').join(' ')}`}\n            aria-hidden={!this.open}\n            role={\n              this.host.getAttribute('role') === 'group' ? 'group' : 'dialog'\n            }\n            aria-modal={\n              this.host.getAttribute('role') === 'group' ? undefined : 'true'\n            }\n            aria-labelledby={this.dialogTitle ? this.labelId : undefined}\n          >\n            {this.dialogTitle && (\n              <span\n                id={this.labelId}\n                class=\"dropdown__accessible-title\"\n                aria-live={\n                  this.host.getAttribute('role') === 'group'\n                    ? undefined\n                    : 'polite'\n                }\n              >\n                {this.dialogTitle}\n              </span>\n            )}\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}