@nanoporetech-digital/components 3.5.1 → 3.7.0

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-12-14T12:36:55",
+  "timestamp": "2023-01-10T23:15:45",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.19.4",
@@ -3941,7 +3941,8 @@
           "nano-progress-bar",
           "nano-skeleton",
           "nano-spinner",
-          "nano-icon"
+          "nano-icon",
+          "nano-tooltip"
         ]
       }
     },
@@ -7839,7 +7840,7 @@
           "mutable": false,
           "attr": "lazy",
           "reflectToAttr": false,
-          "docs": "If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\nDefault, `false`.",
+          "docs": "If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\nDefault, `true`.",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -11542,18 +11543,61 @@
     },
     {
       "filePath": "./src/components/resize-observe/resize-observe.tsx",
-      "encapsulation": "none",
+      "encapsulation": "shadow",
       "tag": "nano-resize-observe",
       "readme": "# nano-resize-observe\n\n\n",
-      "docs": "A Resize-Observer utility component.\nTakes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.",
+      "docs": "A Resize-Observer utility component.\nTakes a string list of sizes and optional class-names.\nAdds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\nAdditionally, can fire events when content no-longer fits within the element.",
       "docsTags": [
         {
           "name": "slot",
           "text": "- Main slot for any content."
+        },
+        {
+          "name": "slot",
+          "text": "content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off"
+        },
+        {
+          "name": "slot",
+          "text": "content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off"
+        },
+        {
+          "name": "slot",
+          "text": "content-fit-y - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off"
+        },
+        {
+          "name": "slot",
+          "text": "content-nofit-y - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off"
         }
       ],
       "usage": {},
       "props": [
+        {
+          "name": "notifyContentFit",
+          "type": "\"x\" | \"xy\" | \"y\"",
+          "mutable": false,
+          "attr": "notify-content-fit",
+          "reflectToAttr": false,
+          "docs": "Fire `nanoResizeContentFitChange` events notifying\nwhether content currently fits or does not on the x, y or both axis'.\nAlso makes the `content-fit-...` slots available",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "x",
+              "type": "string"
+            },
+            {
+              "value": "xy",
+              "type": "string"
+            },
+            {
+              "value": "y",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "states",
           "type": "string",
@@ -11575,6 +11619,15 @@
       ],
       "methods": [],
       "events": [
+        {
+          "event": "nanoResizeContentFitChange",
+          "detail": "{ x: boolean; y: boolean; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires when the content either begins or stops to fit. Will only work when `notifyContentFit` is set.",
+          "docsTags": []
+        },
         {
           "event": "nanoResizeObserverReady",
           "detail": "void",
@@ -11600,6 +11653,22 @@
         {
           "name": "",
           "docs": "Main slot for any content."
+        },
+        {
+          "name": "content-fit-x",
+          "docs": "optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off"
+        },
+        {
+          "name": "content-fit-y",
+          "docs": "optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off"
+        },
+        {
+          "name": "content-nofit-x",
+          "docs": "optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off"
+        },
+        {
+          "name": "content-nofit-y",
+          "docs": "optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off"
         }
       ],
       "parts": [],
@@ -14734,15 +14803,15 @@
         },
         {
           "name": "columns",
-          "type": "ColumnConfig<RowData>[]",
+          "type": "ColumnConfig<RowGeneric>[]",
           "mutable": true,
           "reflectToAttr": false,
-          "docs": "The column config used to generate present the rows of data",
+          "docs": "The column config used to present the rows of data",
           "docsTags": [],
           "default": "[]",
           "values": [
             {
-              "type": "ColumnConfig<RowData>[]"
+              "type": "ColumnConfig<RowGeneric>[]"
             }
           ],
           "optional": false,
@@ -14752,14 +14821,17 @@
         },
         {
           "name": "customFilterFn",
-          "type": "(filters: Filter[]) => Promise<void>",
+          "type": "(filters: Filter[]) => Promise<true | Falsy>",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A custom filtering function. Should return a promise.\nOn successful completion the column UI will be updated.\nA good use-case would be performing the filter on a server / via fetch.\nThen on success, updating the table's data via the `rows` property",
+          "docs": "A custom filtering function. Should return a promise.\nIf the promise resolves as `true` the column UI will be updated.\nIf the promise resolves as falsey, the sort will be performed by the component.\nA good use-case would be performing the filter on a server / via fetch.\nThen on success, updating the table's data via the `rows` property",
           "docsTags": [],
           "values": [
             {
-              "type": "(filters: Filter[]) => Promise<void>"
+              "type": "(filters: Filter[]) => Promise<true"
+            },
+            {
+              "type": "Falsy>"
             }
           ],
           "optional": true,
@@ -14769,14 +14841,17 @@
         },
         {
           "name": "customSortFn",
-          "type": "(property: keyof RowData, order: Order) => Promise<void>",
+          "type": "(property: keyof RowGeneric, order: Order) => Promise<true | Falsy>",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A custom sorting function. Should return a promise.\nOn successful completion the column UI will be updated.\nA good use-case would be performing the sort on a server / via fetch.\nThen on success, updating the table's data via the `rows` property",
+          "docs": "A custom sorting function. Should return a promise.\nIf the promise resolves as `true` the column UI will be updated.\nIf the promise resolves as falsey, the sort will be performed by the component.\nA good use-case would be performing the sort on a server / via fetch.\nThen on success, updating the table's data via the `rows` property",
           "docsTags": [],
           "values": [
             {
-              "type": "(property: keyof RowData, order: Order) => Promise<void>"
+              "type": "(property: keyof RowGeneric, order: Order) => Promise<true"
+            },
+            {
+              "type": "Falsy>"
             }
           ],
           "optional": true,
@@ -14864,9 +14939,9 @@
           "mutable": false,
           "attr": "loading",
           "reflectToAttr": false,
-          "docs": "Will show a loading state when true.\nWill be shown automatically if `rows` is a promise waiting to resolve\nor when performing custom filtering or sorting",
+          "docs": "Will show a loading state when set to true.\nBy default, will be shown automatically if `rows` is a promise waiting to resolve\nor when performing custom filtering or sorting.\n*Note* when set manually, will overwrite any internal loading state.\nSet to 'undefined' to revert to default behaviour.",
           "docsTags": [],
-          "default": "false",
+          "default": "undefined",
           "values": [
             {
               "type": "boolean"
@@ -14874,8 +14949,8 @@
           ],
           "optional": false,
           "required": false,
-          "getter": true,
-          "setter": true
+          "getter": false,
+          "setter": false
         },
         {
           "name": "perBlock",
@@ -14917,14 +14992,14 @@
         },
         {
           "name": "rowRender",
-          "type": "RowRenderer",
+          "type": "RowRenderer<RowData<RowGeneric>>",
           "mutable": false,
           "reflectToAttr": false,
           "docs": "Used for custom row rendering",
           "docsTags": [],
           "values": [
             {
-              "type": "RowRenderer"
+              "type": "RowRenderer<RowData<RowGeneric>>"
             }
           ],
           "optional": false,
@@ -14934,17 +15009,17 @@
         },
         {
           "name": "rows",
-          "type": "Promise<RowData[]> | RowData[]",
-          "mutable": false,
+          "type": "Promise<RowGeneric[]> | RowGeneric[]",
+          "mutable": true,
           "reflectToAttr": false,
           "docs": "The data to place in the table",
           "docsTags": [],
           "values": [
             {
-              "type": "Promise<RowData[]>"
+              "type": "Promise<RowGeneric[]>"
             },
             {
-              "type": "RowData[]"
+              "type": "RowGeneric[]"
             }
           ],
           "optional": false,
@@ -15031,6 +15106,25 @@
           "required": false,
           "getter": false,
           "setter": false
+        },
+        {
+          "name": "virtualTotalItems",
+          "type": "number",
+          "mutable": false,
+          "attr": "virtual-total-items",
+          "reflectToAttr": false,
+          "docs": "Use this to render the table with roughly the correct dimensions.\na use-case might be; fetch a small initial dataset to minimise load-time,\nrender the table with the correct dimensions, the table becomes interactive,\nload the rest of the data",
+          "docsTags": [],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [
@@ -15125,6 +15219,26 @@
               "text": "a promise which resolves when complete"
             }
           ]
+        },
+        {
+          "name": "updateRow",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "updateRow(row: TableTypes.RowData, rowIndex: number) => Promise<void>",
+          "parameters": [],
+          "docs": "Updates a row model at a given index",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "row - the row to update.\n*Note* - this should come from the `col.cellTemplate` or `row.rowRender.template`  `rowModel` property\n- rows are augmented with certain properties to aid with efficient rendering"
+            },
+            {
+              "name": "param",
+              "text": "rowIndex - the row index to insert this row"
+            }
+          ]
         }
       ],
       "events": [
@@ -15148,13 +15262,22 @@
         },
         {
           "event": "nanoTblAfterSort",
-          "detail": "{ column: keyof RowData; order: Order; }",
+          "detail": "{ column: keyof RowGeneric; order: Order; }",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
           "docs": "Fired after a column is sorted",
           "docsTags": []
         },
+        {
+          "event": "nanoTblBeforeEdit",
+          "detail": "{ term: string; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fired before a general search.\n`event.preventDefault()` to stop searching.",
+          "docsTags": []
+        },
         {
           "event": "nanoTblBeforeFilter",
           "detail": "{ filters: Filter[]; }",
@@ -15175,7 +15298,7 @@
         },
         {
           "event": "nanoTblBeforeSort",
-          "detail": "{ column: keyof RowData; order: Order; }",
+          "detail": "{ column: keyof RowGeneric; order: Order; }",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
@@ -15193,7 +15316,7 @@
         },
         {
           "event": "nanoTblColDrag",
-          "detail": "{ column: keyof RowData; }",
+          "detail": "{ column: keyof RowGeneric; }",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
@@ -15202,7 +15325,7 @@
         },
         {
           "event": "nanoTblColDrop",
-          "detail": "{ fromCol: keyof RowData; toCol: keyof RowData; fromIndex: number; toIndex: number; }",
+          "detail": "{ fromCol: keyof RowGeneric; toCol: keyof RowGeneric; fromIndex: number; toIndex: number; }",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
@@ -15398,7 +15521,8 @@
         "nano-progress-bar",
         "nano-skeleton",
         "nano-spinner",
-        "nano-icon"
+        "nano-icon",
+        "nano-tooltip"
       ],
       "dependencyGraph": {
         "nano-table": [
@@ -15406,7 +15530,8 @@
           "nano-progress-bar",
           "nano-skeleton",
           "nano-spinner",
-          "nano-icon"
+          "nano-icon",
+          "nano-tooltip"
         ],
         "nano-demo": [
           "nano-table"
@@ -15488,6 +15613,25 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "hoist",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "hoist",
+          "reflectToAttr": false,
+          "docs": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "open",
           "type": "boolean",
@@ -15727,12 +15871,16 @@
         }
       ],
       "dependents": [
-        "nano-file-upload"
+        "nano-file-upload",
+        "nano-table"
       ],
       "dependencies": [],
       "dependencyGraph": {
         "nano-file-upload": [
           "nano-tooltip"
+        ],
+        "nano-table": [
+          "nano-tooltip"
         ]
       }
     }

package/docs-vscode.json

@@ -1484,7 +1484,7 @@
         },
         {
           "name": "lazy",
-          "description": "If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\nDefault, `false`."
+          "description": "If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\nDefault, `true`."
         },
         {
           "name": "name",
@@ -2187,9 +2187,24 @@
       "name": "nano-resize-observe",
       "description": {
         "kind": "markdown",
-        "value": "A Resize-Observer utility component.\nTakes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes."
+        "value": "A Resize-Observer utility component.\nTakes a string list of sizes and optional class-names.\nAdds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\nAdditionally, can fire events when content no-longer fits within the element."
       },
       "attributes": [
+        {
+          "name": "notify-content-fit",
+          "description": "Fire `nanoResizeContentFitChange` events notifying\nwhether content currently fits or does not on the x, y or both axis'.\nAlso makes the `content-fit-...` slots available",
+          "values": [
+            {
+              "name": "x"
+            },
+            {
+              "name": "xy"
+            },
+            {
+              "name": "y"
+            }
+          ]
+        },
         {
           "name": "states",
           "description": "string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\nFormat: `states=\"800w, 300h class1 class2\"`"
@@ -2707,7 +2722,7 @@
         },
         {
           "name": "loading",
-          "description": "Will show a loading state when true.\nWill be shown automatically if `rows` is a promise waiting to resolve\nor when performing custom filtering or sorting"
+          "description": "Will show a loading state when set to true.\nBy default, will be shown automatically if `rows` is a promise waiting to resolve\nor when performing custom filtering or sorting.\n*Note* when set manually, will overwrite any internal loading state.\nSet to 'undefined' to revert to default behaviour."
         },
         {
           "name": "per-block",
@@ -2740,6 +2755,10 @@
               "name": "table"
             }
           ]
+        },
+        {
+          "name": "virtual-total-items",
+          "description": "Use this to render the table with roughly the correct dimensions.\na use-case might be; fetch a small initial dataset to minimise load-time,\nrender the table with the correct dimensions, the table becomes interactive,\nload the rest of the data"
         }
       ]
     },
@@ -2762,6 +2781,10 @@
           "name": "distance",
           "description": "The distance in pixels from which to offset the tooltip away from its target."
         },
+        {
+          "name": "hoist",
+          "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`."
+        },
         {
           "name": "open",
           "description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "3.5.1",
+  "version": "3.7.0",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -124,5 +124,5 @@
     "nanopore",
     "digital"
   ],
-  "gitHead": "3c734e80f6553e5b8283ed766395a0587256cc4d"
+  "gitHead": "7e820bab43e6f12191ba96ff4f24105c24db1402"
 }

package/dist/cjs/date-utils-c581f187.js.map

@@ -1 +0,0 @@
-{"file":"date-utils-c581f187.js","mappings":"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","names":["DaysOfWeek"],"sources":["./src/utils/date-utils.ts"],"sourcesContent":["const ISO_DATE_FORMAT = /^(\\d{4})-(\\d{2})-(\\d{2})/;\n\nexport enum DaysOfWeek {\n  Sunday = 0,\n  Monday = 1,\n  Tuesday = 2,\n  Wednesday = 3,\n  Thursday = 4,\n  Friday = 5,\n  Saturday = 6,\n}\n\n/**\n * @param year\n * @param month\n * @param day\n * @returns a new Date objecy\n */\nexport function createDate(year: string, month: string, day: string): Date {\n  const dayInt = parseInt(day, 10);\n  const monthInt = parseInt(month, 10);\n  const yearInt = parseInt(year, 10);\n\n  const isValid =\n    Number.isInteger(yearInt) && // all parts should be integers\n    Number.isInteger(monthInt) &&\n    Number.isInteger(dayInt) &&\n    monthInt > 0 && // month must be 1-12\n    monthInt <= 12 &&\n    dayInt > 0 && // day must be 1-31\n    dayInt <= 31 &&\n    yearInt > 0;\n\n  if (isValid) {\n    return new Date(yearInt, monthInt - 1, dayInt);\n  }\n}\n\n/**\n * @param value date string in ISO format YYYY-MM-DD\n * @returns an ISO Date object\n */\nexport function parseISODate(value: string): Date {\n  if (!value) return;\n  const matches = value.match(ISO_DATE_FORMAT);\n  if (matches) {\n    return createDate(matches[1], matches[2], matches[3]);\n  }\n}\n\n/**\n * print date in format YYYY-MM-DD\n * @param date\n * @returns an iso date string\n */\nexport function printISODate(date: Date): string {\n  if (!date) return '';\n\n  let d = date.getDate().toString(10);\n  let m = (date.getMonth() + 1).toString(10);\n  const y = date.getFullYear().toString(10);\n\n  // days are not zero-indexed, so pad if less than 10\n  if (date.getDate() < 10) {\n    d = `0${d}`;\n  }\n\n  // months *are* zero-indexed, pad if less than 9!\n  if (date.getMonth() < 9) {\n    m = `0${m}`;\n  }\n\n  return `${y}-${m}-${d}`;\n}\n\n/**\n * Compare if two dates are equal in terms of day, month, and year\n * @param a date to compare\n * @param b date to compare\n * @returns boolean\n */\nexport function isEqual(a: Date, b: Date): boolean {\n  if (a == null || b == null) return false;\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\n/**\n * Add days to a date\n * @param date\n * @param days\n * @returns a new Date\n */\nexport function addDays(date: Date, days: number): Date {\n  const d = new Date(date);\n  d.setDate(d.getDate() + days);\n  return d;\n}\n\n/**\n * Add months to a date\n * @param date\n * @param months\n * @returns a new Date\n */\nexport function addMonths(date: Date, months: number): Date {\n  const d = new Date(date);\n  d.setMonth(date.getMonth() + months);\n  return d;\n}\n\n/**\n * Add years to a date\n * @param date\n * @param years\n * @returns a new Date\n */\nexport function addYears(date: Date, years: number): Date {\n  const d = new Date(date);\n  d.setFullYear(date.getFullYear() + years);\n  return d;\n}\n\n/**\n * Takes a date and a day enum and finds the first day of that date's week\n * @param date\n * @param firstDayOfWeek\n * @returns the first day of a date's week\n */\nexport function startOfWeek(\n  date: Date,\n  firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date {\n  const d = new Date(date);\n  const day = d.getDay();\n  const diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;\n\n  d.setDate(d.getDate() - diff);\n  return d;\n}\n\n/**\n * Takes a date and a day enum and finds the last day of that date's week\n * @param date\n * @param firstDayOfWeek\n * @returns the last day of that date's week\n */\nexport function endOfWeek(\n  date: Date,\n  firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date {\n  const d = new Date(date);\n  const day = d.getDay();\n  const diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);\n\n  d.setDate(d.getDate() + diff);\n  return d;\n}\n\n/**\n * Get the date of the start of the month\n * @param date\n * @returns start of the month Date\n */\nexport function startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\n/**\n * Get the date of the end of the month\n * @param date\n * @returns end of the month Date\n */\nexport function endOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\n/**\n * Changes a dates' month\n * @param date\n * @param month\n * @returns a new Date with the new month set\n */\nexport function setMonth(date: Date, month: number): Date {\n  const d = new Date(date);\n  d.setMonth(month);\n  return d;\n}\n\n/**\n * Changes a dates' year\n * @param date\n * @param year\n * @returns a new Date with the new year set\n */\nexport function setYear(date: Date, year: number): Date {\n  const d = new Date(date);\n  d.setFullYear(year);\n  return d;\n}\n\n/**\n * Check if date is within a min and max\n * @param date\n * @param min\n * @param max\n * @returns boolean\n */\nexport function inRange(date: Date, min?: Date, max?: Date): boolean {\n  return dateClamp(date, min, max) === date;\n}\n\n/**\n * Ensures date is within range, returns min or max if out of bounds\n * @param date\n * @param min\n * @param max\n * @returns the clamped date\n */\nexport function dateClamp(date: Date, min?: Date, max?: Date): Date {\n  const time = date.getTime();\n\n  if (min && min instanceof Date && time < min.getTime()) {\n    return min;\n  }\n  if (max && max instanceof Date && time > max.getTime()) {\n    return max;\n  }\n  return date;\n}\n\n/**\n * Given start and end date, return an (inclusive) array of all dates in between\n * @param start\n * @param end\n * @returns an array of Date objects in the range\n */\nfunction getDaysInRange(start: Date, end: Date): Date[] {\n  const days: Date[] = [];\n  let current = start;\n\n  while (!isEqual(current, end)) {\n    days.push(current);\n    current = addDays(current, 1);\n  }\n\n  days.push(current);\n\n  return days;\n}\n\n/**\n * Given a date, return an array of dates from a calendar perspective\n * @param date\n * @param firstDayOfWeek\n * @returns an array of Date objects in the month range\n */\nexport function getViewOfMonth(\n  date: Date,\n  firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date[] {\n  const start = startOfWeek(startOfMonth(date), firstDayOfWeek);\n  const end = endOfWeek(endOfMonth(date), firstDayOfWeek);\n\n  return getDaysInRange(start, end);\n}\n"],"version":3}

package/dist/cjs/nano-progress-bar.cjs.entry.js

@@ -1,33 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-41582c2a.js');
-
-const progressBarCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--height:1em;--track-color:rgba(var(--nano-track-rgb, 228, 230, 232), 1);--indicator-color:rgba(var(--nano-indicator-rgb, 84, 140, 175), 1);--label-color:var(--nano-color-white, white);display:block}.progress-bar{position:relative;background-color:var(--track-color);height:var(--height);border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));overflow:hidden}.progress-bar__indicator{height:100%;font-size:0.75em;background-color:var(--indicator-color);color:var(--label-color);text-align:center;white-space:nowrap;overflow:hidden;transition:0.4s width, 0.4s background-color;transform:translateZ(0);-webkit-user-select:none;user-select:none;transform-origin:left}.progress-bar--indeterminate .progress-bar__indicator{animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{scale:1 1;transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;transform:translateX(100%) translateZ(0)}}";
-
-const ProgressBar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.value = 0;
-    this.indeterminate = false;
-    this.showPercent = false;
-  }
-  render() {
-    return (index.h("div", { part: "base", class: {
-        'progress-bar': true,
-        'progress-bar--indeterminate': this.indeterminate,
-      }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, index.h("div", { part: "indicator", class: "progress-bar__indicator", style: {
-        width: !this.indeterminate ? `${this.value}%` : undefined,
-      } }, index.h("span", { part: "label", class: "progress-bar__label" }, index.h("slot", null, !this.indeterminate && this.showPercent ? `${this.value}%` : '')))));
-  }
-  get host() { return index.getElement(this); }
-};
-ProgressBar.style = progressBarCss;
-
-exports.nano_progress_bar = ProgressBar;
-
-//# sourceMappingURL=nano-progress-bar.cjs.entry.js.map

package/dist/cjs/nano-progress-bar.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"nano-progress-bar.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,cAAc,GAAG,8iCAA8iC;;MCiBxjC,WAAW;;;iBAIN,CAAC;yBAGO,KAAK;uBAGP,KAAK;;EAE3B,MAAM;IACJ,QACEA,iBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;OAClD,EACD,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,gBACxB,UAAU,mBACP,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,IAErDA,iBACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;QACL,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,SAAS;OAC1D,IAEDA,kBAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB,IAC5CA,sBACG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,EAAE,CAC3D,CACF,CACH,CACF,EACN;GACH;;;;;;;","names":["h"],"sources":["./src/components/progress-bar/progress-bar.scss?tag=nano-progress-bar&encapsulation=shadow","./src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --height: The progress bar's height. Default 1em\n * @prop --track-color: The track color. Default rgba(#{$progress-track-color-rgb}, 1);\n * @prop --indicator-color: The indicator color. Default rgba(#{$progress-indicator-color-rgb}, 1);\n * @prop --label-color: The label color. Default var(--nano-color-white, white);\n */\n:host {\n  --height: 1em;\n  --track-color: rgba(#{$progress-track-color-rgb}, 1);\n  --indicator-color: rgba(#{$progress-indicator-color-rgb}, 1);\n  --label-color: var(--nano-color-white, white);\n\n  display: block;\n}\n\n.progress-bar {\n  position: relative;\n  background-color: var(--track-color);\n  height: var(--height);\n  border-radius: $layer-border-radius;\n  overflow: hidden;\n}\n\n.progress-bar__indicator {\n  height: 100%;\n  font-size: 0.75em;\n  background-color: var(--indicator-color);\n  color: var(--label-color);\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  transition: 0.4s width, 0.4s background-color;\n  transform: translateZ(0);\n  user-select: none;\n  transform-origin: left;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n  animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n  0% {\n    scale: 1 1;\n    transform: translateX(-100%) translateZ(0);\n  }\n\n  75%,\n  100% {\n    scale: 1 1;\n    transform: translateX(100%) translateZ(0);\n  }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n/**\n * Used to show the status of an ongoing operation.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n  tag: 'nano-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true,\n})\nexport class ProgressBar {\n  @Element() host: HTMLNanoProgressBarElement;\n\n  /** The progress bar's percentage, 0 to 100. */\n  @Prop() value = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @Prop() indeterminate = false;\n\n  /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          'progress-bar': true,\n          'progress-bar--indeterminate': this.indeterminate,\n        }}\n        role=\"progressbar\"\n        title={this.host.title || undefined}\n        aria-label=\"Progress\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={this.indeterminate ? null : this.value}\n      >\n        <div\n          part=\"indicator\"\n          class=\"progress-bar__indicator\"\n          style={{\n            width: !this.indeterminate ? `${this.value}%` : undefined,\n          }}\n        >\n          <span part=\"label\" class=\"progress-bar__label\">\n            <slot>\n              {!this.indeterminate && this.showPercent ? `${this.value}%` : ''}\n            </slot>\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}