npm - @nanoporetech-digital/components - Versions diffs - 7.9.2 → 8.0.0-alpha.0 - Mend

@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1783) hide show

package/dist/components/nano-checkbox.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"nano-checkbox.js","mappings":";;;;;;;;AAAA,MAAM,WAAW,GAAG,69UAA69U,CAAC;AACl/U,2BAAe,WAAW;;ACkB1B,IAAI,WAAW,GAAG,CAAC,CAAC;MAcP,QAAQ;;;;;;;;IACX,OAAO,GAAG,WAAW,WAAW,EAAE,EAAE,CAAC;IACrC,KAAK,CAAmB;;IAGvB,SAAS,GAAyB,UAAU,CAAC;;IAGd,QAAQ,GAAG,KAAK,CAAC;;;;IAKjB,OAAO,GAAY,KAAK,CAAC;IAGjE,MAAM,mBAAmB;QACvB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;QAExB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAElC,IACE,IAAI,CAAC,SAAS,KAAK,OAAO;YAC1B,IAAI,CAAC,IAAI;YACT,IAAI,CAAC,OAAO;YACZ,IAAI,CAAC,IAAI,CAAC,WAAW,EACrB;YACA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YACvC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAA2B,CAAC;YAC9D,IAAI,KAAgB,CAAC;YAErB,IAAI,IAAI,EAAE;gBACR,KAAK,GAAG,KAAK,CAAC,IAAI,CAChB,IAAI,CAAC,gBAAgB,CACnB,GAAG,YAAY,CAAC,eAAe,CAAC,UAAU,IAAI,CAAC,IAAI,IAAI,CACxD,CACF,CAAC;aACH;iBAAM;gBACL,KAAK,GAAG,KAAK,CAAC,IAAI,CAChB,IAAI,CAAC,gBAAgB,CACnB,GAAG,YAAY,CAAC,eAAe,CAAC,UAAU,IAAI,CAAC,IAAI,IAAI,CACxD,CACF,EAAE,MAAM,CAAC,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;aAC9C;YACD,KAAK,CAAC,GAAG,CAAC,CAAC,EAA2B;gBACpC,IAAI,EAAE,KAAK,IAAI,CAAC,IAAI;oBAAE,EAAE,CAAC,OAAO,GAAG,KAAK,CAAC;aAC1C,CAAC,CAAC;SACJ;QACD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;KACpE;;;;IAKwB,QAAQ,GAAY,KAAK,CAAC;;;;;IAM1B,KAAK,GAAW,IAAI,CAAC;;;;IAKrB,IAAI,CAAS;;;;IAKb,QAAQ,GAAY,KAAK,CAAC;;;;IAK1B,IAAI,GAMR,UAAU,CAAC;IAGhC,UAAU;QACR,IAAI,CAAC,UAAU,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;YACnD,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC;;YACzB,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC;KAC/B;;;;IAKO,KAAK,CAAU;;;;IAKiB,aAAa,GAAY,KAAK,CAAC;IAGvE,yBAAyB;QACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;KAC/C;;;;;IAMD,IACI,OAAO;QACT,OAAO,IAAI,CAAC,QAAQ,CAAC;KACtB;IACQ,QAAQ,GAAG,KAAK,CAAC;;;;IAK1B,IACI,eAAe;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,EAAE,CAAC;QAC3B,OAAO,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC;KACrC;;;;IAKO,KAAK,CAAS;;;;IAKd,IAAI,CAAiB;;;;IAKpB,UAAU,CAA0C;;;;IAKpD,SAAS,CAAe;;;;IAKxB,QAAQ,CAAe;;;;;;IAShC,MAAM,eAAe;QACnB,IAAI,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC;KACnC;;;;;;IAQD,MAAM,cAAc,CAClB,gBAAyB,KAAK;QAE9B,IAAI,aAAa;YAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;QAC/C,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;QAE3C,OAAO;YACL,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;YACtB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB;SAC3C,CAAC;KACH;;;;;IAOD,MAAM,QAAQ,CAAC,OAAe,EAAE,YAAY,GAAG,IAAI;QACjD,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;QACxB,IAAI,YAAY;YAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC;QACnD,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;KACvC;;;;IAMD,MAAM,QAAQ;QACZ,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YACnB,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAChC;KACF;;;;IAMD,MAAM,WAAW;QACf,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YAClB,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;SACvC;KACF;IAGD,OAAO,CAAC,CAAC;QACP,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI;cAClB,QAAQ,CAAC,aAAa,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC;cACvC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAC9B,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;YAAE,OAAO;QAE5D,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;;IAIO,aAAa,GAAG,CAAC,EAAS;QAChC,IAAI,CAAC,QAAQ,GAAG,CAAE,EAAE,CAAC,MAA2B,CAAC,QAAQ,CAAC,KAAK,CAAC;KACjE,CAAC;IAEM,YAAY,GAAG,CAAC,EAAc;QACpC,IAAI,CAAC,OAAO,GAAI,EAAE,CAAC,MAA2B,CAAC,OAAO,CAAC;QACvD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B,CAAC;IAEM,WAAW,GAAG;QACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,UAAU,GAAG;QACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;;;IAIM,cAAc;QACpB,qBAAqB,CAAC,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KAClE;;IAID,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IAED,gBAAgB;QACd,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QAC9C,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAClC;IAED,oBAAoB;QAClB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACpC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QAEtC,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,EAAE,GAAG,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,eAAe,EAAE,IAAI,EAAE,IAEnE,8DACE,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,iBAAiB,EAAE,IAAI,CAAC,OAAO;gBAC/B,iBAAiB,EAAE,IAAI,CAAC,OAAO;gBAC/B,kBAAkB,EAAE,IAAI,CAAC,QAAQ;gBACjC,iBAAiB,EAAE,IAAI,CAAC,QAAQ;gBAChC,uBAAuB,EAAE,IAAI,CAAC,aAAa;aAC5C,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,IAErB,8DACE,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,qBACA,OAAO,EACxB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,GAAG,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,EACpC,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,SAAS,EAAE,IAAI,CAAC,aAAa,GAC7B,EACF,6DAAM,KAAK,EAAE,+BAA+B,GAAG,IAAI,CAAC,IAAI,GAAS,EAEjE,4DAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,+BAA+B,GAAG,IAAI,CAAC,IAAI,IACjE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,+DAAO,IAAI,CAAC,KAAK,CAAQ,EAC/D,6DAAM,MAAM,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,IAC7C,8DAAQ,CACH,CACH,CACA,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n /**\n * @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{tokens.$control-invalid-style};\n * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{tokens.$control-focus-style};\n * @prop --padding: padding around radio and checkbox controls. Defaults to initial;\n * @prop --control-padding: padding around tag and segmented controls text. Various defaults.\n * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{map.get(tokens.$colors, white)};\n * @prop --check-border-color: initial border color. Defaults to #{map.get(tokens.$colors, palegrey)};\n * @prop --check-border-size: initial border size. Default to 1px;\n * @prop --check-border-style: Initial border style. Defaults to var(--check-border-size) solid var(--check-border-color);\n * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{map.get(tokens.$colors, darkgrey)};\n * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get(tokens.$colors, darkgrey)};\n * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get(tokens.$colors, white)};\n * @prop --check-base-size: Relative scaling size for check controls. Defaults to to inherit;\n\n * @prop --cb-border-radius: Checkbox border radius. Defaults to to 2px and 5px on [has-focus];\n * @prop --radio-border-radius: Radio border radius. Defaults to to 50%;\n * @prop --tagbox-rgb: an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to #{mx.color-to-rgb-list(map.get(tokens.$colors, lightblue))};\n * @prop --tagbox-border-color: Defaults to rgb(var(--tagbox-rgb) / 50%);\n * @prop --tagbox-bg-color: Defaults to rgb(var(--tagbox-rgb) / 10%);\n * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{map.get(tokens.$colors, blue)};\n * @prop --segment-border-radius: Defaults to 3px;\n * @prop --segment-shadow: Defaults to 0 1px 4px rgb(0 0 0 / 20%);\n * @prop --switch-inactive-color: Defaults to rgb(#{mx.color-to-rgb-list(map.get(tokens.$colors, palegrey))} / 70%);\n * @prop --switch-active-color: Defaults to #{map.get(tokens.$colors, blue)};\n */\n\n --focus-shadow: #{tokens.$control-focus-style};\n --invalid-shadow: #{tokens.$control-focus-size + ' ' map.get(tokens.$colors, red)};\n --padding: initial;\n --check-bg-color: #{map.get(tokens.$colors, white)};\n --check-border-color: #{map.get(tokens.$colors, palegrey)};\n --check-border-size: 1px;\n --check-border-style: var(--check-border-size) solid var(--check-border-color);\n --check-checked-bg-color: #{map.get(tokens.$colors, darkgrey)};\n --check-checked-border-color: #{map.get(tokens.$colors, darkgrey)};\n --check-checked-higlight-color: #{map.get(tokens.$colors, white)};\n --check-base-size: inherit;\n --label-spacing: 10px 0;\n\n // type specific\n\n // tag\n --tagbox-rgb: #{mx.color-to-rgb-list(map.get(tokens.$colors, lightblue))};\n --tagbox-border-color: rgb(var(--tagbox-rgb) / 50%);\n --tagbox-bg-color: rgb(var(--tagbox-rgb) / 20%);\n --tagbox-border-radius: 0;\n\n // segment\n --segment-color: #{map.get(tokens.$colors, blue)};\n --segment-border-radius: 3px;\n --segment-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n // cb / radio\n --cb-border-radius: 2px;\n --radio-border-radius: 50%;\n\n // switch\n --switch-inactive-color: rgb(#{mx.color-to-rgb-list(map.get(tokens.$colors, palegrey))} / 70%);\n --switch-active-color: #{map.get(tokens.$colors, blue)};\n\n display: inline-block;\n max-inline-size: 100%;\n\n * {\n box-sizing: inherit;\n }\n}\n\n:host([type='tag']) {\n text-transform: uppercase;\n\n --control-padding: 0.2rem 1rem;\n}\n\n:host([type='radio'][checked]):not([checked='false']) {\n --check-border-size: 0.3125em;\n}\n\n:host([type='segment']) {\n --check-border-style: none;\n --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host([type='segment-pill']) {\n --check-border-color: #{rgba(map.get(tokens.$colors, palegrey), 0.5)};\n --segment-border-radius: 5px;\n --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host(.nano-color) {\n --tagbox-rgb: var(--nano-color-base-rgb);\n --focus-shadow: #{tokens.$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n --tagbox-border-color: rgb(var(--tagbox-rgb) / 80%);\n --tagbox-bg-color: rgb(var(--tagbox-rgb) / 50%);\n}\n\n:host([has-focus]:not([has-focus='false'])) {\n --cb-border-radius: 5px;\n}\n\n:host([disabled]:not([disabled='false'])) {\n opacity: 0.7;\n\n --tagbox-rgb: #{mx.color-to-rgb-list(map.get(tokens.$colors, mediumgrey))};\n --check-bg-color: #{rgba(map.get(tokens.$colors, mediumgrey), 0.5)};\n --check-checked-bg-color: #{rgba(map.get(tokens.$colors, mediumgrey), 0.5)};\n --segment-color: #{map.get(tokens.$colors, darkgrey)};\n}\n\n.nanocb {\n padding: var(--padding);\n cursor: pointer;\n display: flex;\n align-items: center;\n line-height: 1.2;\n position: relative;\n\n // The mock, viewable 'input' control. Only relevant for controls where the label\n // is outside / separate from the UI control (e.g. checkbox, radio, switch).\n\n &__input {\n border-radius: var(--cb-border-radius, 3px);\n font-size: var(--check-base-size);\n position: relative;\n block-size: 1.5em;\n inline-size: 1.5em;\n min-inline-size: 1.5em;\n border: var(--check-border-style);\n box-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n &::before {\n border-radius: var(--cb-border-radius);\n position: absolute;\n content: '';\n inset-inline-start: calc(0.725em - var(--check-border-size));\n inset-block-start: calc(0.725em - var(--check-border-size));\n inline-size: 0;\n block-size: 0;\n border: 2px solid var(--check-checked-higlight-color);\n transform: scale(0);\n }\n\n &--radio {\n border-radius: var(--radio-border-radius);\n background-color: var(--check-bg-color);\n }\n\n &--checkbox {\n background-color: var(--check-bg-color);\n\n &::after {\n border-radius: var(--cb-border-radius);\n position: absolute;\n content: '';\n inset-inline-start: calc(0.825em - var(--check-border-size));\n inset-block-start: calc(0.825em - var(--check-border-size));\n block-size: 0;\n inline-size: 0;\n border: solid var(--check-checked-higlight-color);\n border-width: 0 0.1875em 0.1875em 0;\n transform: rotate(0deg) scale(0);\n opacity: 1;\n transition: all 0.15s ease-out;\n\n .nanocb--indeterminate & {\n border-width: 0 0 0.1875em;\n }\n }\n }\n\n &--switch {\n border-radius: 1em !important;\n inline-size: 2.4em;\n block-size: 1.3em;\n background: var(--switch-inactive-color);\n\n :host([type=\"switch\"]:not([disabled])) & {\n &:hover::after {\n scale: 1.1 1;\n }\n }\n\n &::after {\n position: relative;\n content: '';\n display: block;\n border-radius: inherit;\n block-size: 80%;\n inline-size: 40%;\n background: var(--check-checked-higlight-color);\n transform-origin: left;\n inset-inline-start: 6%;\n inset-block-start: 10%;\n transition: .1s ease scale, .15s ease left;\n }\n }\n\n &--segment,\n &--segment-pill {\n @include mx.visually-hide();\n\n &::before {\n display: none;\n }\n }\n\n &--tag {\n @include mx.visually-hide();\n\n &::before {\n display: none;\n }\n }\n }\n\n &--invalid:not(.nanocb--focused) {\n .nanocb__input {\n box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--invalid-shadow);\n\n &--tag + .nanocb__label,\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n box-shadow: var(--invalid-shadow);\n z-index: 1;\n }\n }\n }\n\n // The 'real' input control which we hide but use it's state for display\n input {\n @include mx.visually-hide();\n\n &:focus ~ .nanocb__input {\n box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--focus-shadow);\n }\n\n &.focus-visible:focus ~ .nanocb__input {\n &--tag + .nanocb__label,\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n box-shadow: var(--focus-shadow);\n z-index: 1;\n }\n }\n\n &:checked ~ .nanocb__input {\n border-radius: var(--cb-border-radius);\n background-color: var(--check-checked-bg-color);\n transform: rotate(0deg) scale(1);\n opacity: 1;\n border-color: var(--check-checked-border-color);\n\n // segment / segment-pill active\n\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n color: var(--check-checked-higlight-color);\n background-color: var(--check-checked-bg-color);\n box-shadow: inset 0 3px 4px rgb(0 0 0 / 20%);\n }\n\n // radio active\n\n &--radio {\n border-radius: var(--radio-border-radius);\n background-color: var(--check-checked-higlight-color);\n\n &::after {\n border: solid var(--check-checked-border-color);\n border-width: 0 0.125em 0.125em 0;\n opacity: 0;\n }\n\n &::before {\n border-radius: var(--radio-border-radius);\n }\n }\n\n // checkbox active\n\n &--checkbox {\n &::after {\n transform: rotate(45deg) scale(1);\n opacity: 1;\n inset-inline-start: calc(0.575em - var(--check-border-size));\n inset-block-start: calc(0.2875em - var(--check-border-size));\n inline-size: 0.375em;\n block-size: 0.75em;\n border-radius: 0;\n }\n }\n\n // tag active\n\n &--tag + .nanocb__label::after {\n transform: rotate(45deg);\n }\n\n // switch active\n\n &--switch {\n background: var(--switch-active-color);\n\n &::after {\n inset-inline-start: 56%;\n transform-origin: right;\n }\n }\n }\n\n // indeterminate (only checkbox?)\n\n &:indeterminate ~ .nanocb__input--checkbox {\n border-radius: var(--input-border-radius, 5px);\n background-color: var(--check-checked-bg-color);\n transform: rotate(0deg) scale(1);\n opacity: 1;\n border: 0.125em solid var(--check-checked-bg-color);\n\n &::after {\n transform: scale(1);\n opacity: 1;\n inset-inline-start: 0.3125em;\n inset-block-start: 0;\n inline-size: 0.7em;\n block-size: 0.7em;\n border-radius: 0;\n }\n }\n }\n\n // The label\n &__label {\n padding-inline: var(--label-spacing);\n padding-block: 0;\n display: flex;\n align-items: center;\n line-height: 1;\n flex: 1;\n justify-content: space-between;\n\n &--segment,\n &--segment-pill {\n border: var(--check-border-style);\n border-radius: var(--segment-border-radius);\n box-shadow: var(--segment-shadow);\n display: inline-flex;\n padding: var(--control-padding);\n background: var(--check-bg-color);\n color: var(--segment-color);\n align-items: center;\n inline-size: 100%;\n }\n\n &--segment-pill {\n // first\n :host(:first-of-type) & {\n border-start-start-radius: var(--segment-border-radius);\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n border-end-start-radius: var(--segment-border-radius);\n border-inline-end: none;\n }\n\n // middle\n :host(:not(:last-of-type):not(:first-of-type)) & {\n border-radius: 0;\n border-inline-end: none;\n }\n\n // last\n :host(:last-of-type) & {\n border-start-start-radius: 0;\n border-start-end-radius: var(--segment-border-radius);\n border-end-end-radius: var(--segment-border-radius);\n border-end-start-radius: 0;\n }\n\n // single\n :host(:first-of-type:last-of-type) & {\n border-radius: var(--segment-border-radius);\n border: var(--check-border-style);\n }\n }\n\n &--tag {\n letter-spacing: 2px;\n font-weight: 400;\n font-size: 0.65em;\n line-height: 1.4;\n padding: var(--control-padding);\n border: 2px solid #b5aea7;\n border-color: var(--tagbox-border-color);\n background-color: var(--tagbox-bg-color);\n transition: all 0.2s;\n border-radius: var(--cb-border-radius);\n inline-size: 100%;\n\n &::after {\n content: '+';\n margin-inline: 0.3125em 0;\n margin-block: 0;\n font-weight: 200;\n position: relative;\n font-family: inherit;\n font-size: 1.8em;\n display: inline-block;\n transform: rotate(0deg);\n transform-origin: center;\n }\n\n span {\n display: block;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n ComponentInterface,\n State,\n Watch,\n Method,\n Element,\n Host,\n Listen,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport { transformTag, h } from '../../utils/renderer';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport type { ControlValidity, Color } from '../../types/shared';\n\nlet checkboxIds = 0;\n\n/**\n * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n *\n * @slot - if you do not set a label attribute, you can use this slot for more complex markup\n */\n@Component({\n tag: 'nano-checkbox',\n styleUrl: 'checkbox.scss',\n scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n private inputId = `nano-cb-${checkboxIds++}`;\n private input: HTMLInputElement;\n\n @Element() private host: HTMLNanoCheckboxElement;\n @State() inputType: 'checkbox' | 'radio' = 'checkbox';\n\n /** @internal */\n @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n /**\n * checked property that can be used to get/set the value. accepts only boolean values\n */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n @Watch('checked')\n async handleCheckedChange() {\n if (!this.input) return;\n\n this.input.checked = this.checked;\n\n if (\n this.inputType === 'radio' &&\n this.name &&\n this.checked &&\n this.host.isConnected\n ) {\n const form = this.host.closest('form');\n const root = this.host.getRootNode() as ShadowRoot | Document;\n let ctrls: Element[];\n\n if (form) {\n ctrls = Array.from(\n form.querySelectorAll(\n `${transformTag('nano-checkbox')}[name=\"${this.name}\"]`\n )\n );\n } else {\n ctrls = Array.from(\n root.querySelectorAll(\n `${transformTag('nano-checkbox')}[name=\"${this.name}\"]`\n )\n )?.filter((radio) => !radio.closest('form'));\n }\n ctrls.map((el: HTMLNanoCheckboxElement) => {\n if (el !== this.host) el.checked = false;\n });\n }\n this.nanoChange.emit({ value: this.value, checked: this.checked });\n }\n\n /**\n * If `true`, the user cannot interact with the checkbox.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n * it's only present when `checked` is true.\n */\n @Prop({ reflect: true }) value: string = 'on';\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop({ reflect: true }) name: string;\n\n /**\n * Set to true to make the field required.\n */\n @Prop({ reflect: true }) required: boolean = false;\n\n /**\n * Controls the underlying field type and style.\n */\n @Prop({ reflect: true }) type:\n | 'radio'\n | 'checkbox'\n | 'tag'\n | 'segment'\n | 'switch'\n | 'segment-pill' = 'checkbox';\n\n @Watch('type')\n typeChange() {\n if (['checkbox', 'switch', 'tag'].includes(this.type))\n this.inputType = 'checkbox';\n else this.inputType = 'radio';\n }\n\n /**\n * label property that can be used to set the label text. Alternatively you may use a label slot.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n */\n @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n @Watch('indeterminate')\n handleIndeterminateChange() {\n this.checked = false;\n this.input.indeterminate = this.indeterminate;\n }\n\n /**\n * This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n */\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n @State() _invalid = false;\n\n /**\n * Current validation message - if any. @readonly\n */\n @Prop()\n get validityMessage() {\n if (!this.input) return '';\n return this.input.validationMessage;\n }\n\n /**\n * Color to use from your application's color palette.\n */\n @Prop() color?: Color;\n\n /**\n * The form element to associate the input with (its form owner). Must be the id of a form.\n */\n @Prop() form?: string | null;\n\n /**\n * Emited when the checkbox is toggled\n */\n @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n /**\n * Emited when the checkbox is focused\n */\n @Event() nanoFocus: EventEmitter;\n\n /**\n * Emited when the checkbox is blurred\n */\n @Event() nanoBlur: EventEmitter;\n\n // public methods\n\n /**\n * Returns the native input control\n * @returns the native input control\n */\n @Method()\n async getInputElement() {\n if (this.input) return this.input;\n }\n\n /**\n * Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n */\n @Method()\n async reportValidity(\n validateFirst: boolean = false\n ): Promise<ControlValidity> {\n if (validateFirst) this.input.reportValidity();\n this._invalid = !this.input.validity.valid;\n\n return {\n isValid: !this.invalid,\n errorMessage: this.input.validationMessage,\n };\n }\n\n /**\n * Sets a custom validation message.\n * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n */\n @Method()\n async setError(message: string, updateStatus = true) {\n if (!this.input) return;\n if (updateStatus) this._invalid = !!message.length;\n this.input.setCustomValidity(message);\n }\n\n /**\n * Sets focus on the checkbox.\n */\n @Method()\n async setFocus() {\n if (this.input) {\n this.input.focus();\n focusVisible.force(this.input);\n }\n }\n\n /**\n * Removes focus from the checkbox.\n */\n @Method()\n async removeFocus() {\n if (this.input) {\n this.input.blur();\n focusVisible.force(this.input, false);\n }\n }\n\n @Listen('reset', { target: 'body' })\n onReset(e) {\n const form = this.form\n ? document.querySelector('#' + this.form)\n : this.host.closest('form');\n if (!form || e.target !== this.host.closest('form')) return;\n\n this.checked = false;\n }\n\n // private handlers\n\n private handleInvalid = (ev: Event) => {\n this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n };\n\n private handleChange = (ev: InputEvent) => {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.indeterminate = false;\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n /* Although many radio components can be 'checked',\n the underlying control may not be. Check */\n private isRadioChecked() {\n requestAnimationFrame(() => (this.checked = this.input.checked));\n }\n\n // Stencil hooks\n\n componentWillLoad() {\n this.typeChange();\n }\n\n componentDidLoad() {\n this.input.indeterminate = this.indeterminate;\n this.isRadioChecked();\n focusVisible.observe(this.input);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.input);\n }\n\n render() {\n const labelId = this.inputId + '-lbl';\n\n return (\n <Host\n class={{ ...createColorClasses(this.color), 'nano-checkbox': true }}\n >\n <label\n class={{\n nanocb: true,\n 'nanocb--checked': this.checked,\n 'nanocb--invalid': this.invalid,\n 'nanocb--disabled': this.disabled,\n 'nanocb--focused': this.hasFocus,\n 'nanocb--indeterminate': this.indeterminate,\n }}\n htmlFor={this.inputId}\n >\n <input\n type={this.inputType}\n name={this.name}\n form={this.form}\n required={this.required}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-labelledby={labelId}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onChange={this.handleChange}\n ref={(input) => (this.input = input)}\n id={this.inputId}\n onInvalid={this.handleInvalid}\n />\n <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n {this.label && !!this.label.length && <span>{this.label}</span>}\n <span hidden={this.label && !!this.label.length}>\n <slot />\n </span>\n </div>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nano-datalist.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"file":"nano-datalist.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nano-date-input.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"nano-date-input.js","mappings":"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","names":[],"sources":["src/components/date-input/date-input.scss?tag=nano-date-input&encapsulation=scoped","src/components/date-input/date-input.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/utilities/colours' as color;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n /**\n * @prop --focus-shadow: defaults to #{tokens.$control-focus-style};\n * @prop --open-btn-color: defaults to #{tokens.$button-bg-color};\n * @prop --open-btn-border: defaults to none;\n * @prop --close-btn-color: defaults to #{map.get(tokens.$colors, celsius)};\n * @prop --picker-base-size: Base font size of the date picker component. Defaults to 16px;\n */\n\n display: inline-block;\n inline-size: 100%;\n\n --focus-shadow: #{tokens.$control-focus-style};\n --open-btn-color: #{tokens.$button-bg-color};\n --open-btn-border: none;\n --close-btn-color: #{tokens.$button-bg-color};\n --picker-base-size: 16px;\n}\n\n:host(.nano-color) {\n --focus-shadow: #{tokens.$control-focus-size color.current-color(tint, 0.56)};\n}\n\n.nano-icon {\n pointer-events: none;\n}\n\n.date-field {\n display: flex;\n flex-direction: column;\n position: relative;\n\n &__dropdown {\n --padding: 0;\n --overflow: visible;\n\n padding: 0 !important;\n inline-size: 0 !important;\n inline-size: 100%;\n z-index: tokens.$layer-index-dropdown !important;\n }\n\n &__close-bar {\n align-items: center;\n display: flex;\n justify-content: space-between;\n text-overflow: ellipsis;\n white-space: nowrap;\n border: 0;\n margin: 0;\n overflow: visible;\n padding: 0;\n position: absolute;\n inset-inline-end: -8px;\n inset-block-start: -8px;\n inline-size: auto;\n z-index: 1;\n }\n\n &__open {\n background: var(--open-btn-color);\n border: var(--open-btn-border);\n margin: 0;\n appearance: none;\n\n &:focus {\n box-shadow: var(--focus-shadow);\n outline: none;\n }\n }\n\n &__close {\n align-items: center;\n appearance: none;\n background: var(--close-btn-color);\n border: 0;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n block-size: 24px;\n justify-content: center;\n padding: 0;\n inline-size: 24px;\n\n @media (width >= 36em) {\n opacity: 0;\n }\n\n &:focus {\n box-shadow: var(--focus-shadow);\n outline: none;\n\n @media (width >= 36em) {\n opacity: 1;\n }\n }\n\n .nano-icon {\n margin-block: 0;\n margin-inline: auto;\n }\n }\n\n .nano-date-picker {\n font-size: var(--picker-base-size);\n }\n}\n\n.vhidden {\n @include mx.visually-hide();\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Prop,\n Watch,\n State,\n Event,\n EventEmitter,\n Host,\n Method,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport {\n createDate,\n DaysOfWeek,\n printISODate,\n parseISODate,\n} from '../../utils/date-utils';\n\nimport { createColorClasses } from '../../utils/theme';\nimport { InputChangeEventDetail } from '../input/input-interface';\nimport type {\n Color,\n ControlValidity,\n ControlValidityEventDetail,\n} from '../../types/shared';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type {\n DateInputChangeEventDetail,\n DuetLocalizedText,\n LocalDateOpts,\n} from './date-input-interface';\nimport type {\n DateDisabledPredicate,\n PickerChangeEvent,\n} from '../date-picker/date-picker-interface';\nimport type { NanoInputCustomEvent } from '../../components';\n\nconst DateRegxps = {\n d: '(\\\\d{1,2})',\n m: '(\\\\d{1,2})',\n y: '(\\\\d{4})',\n};\n\nlet inputIds = 0;\n\n/**\n * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field. It has specific options for localisation, date formatting and validation.\n *\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot start - input start slot\n * @slot end - input end slot\n */\n@Component({\n tag: 'nano-date-input',\n styleUrl: 'date-input.scss',\n scoped: true,\n})\nexport class DateInput implements ComponentInterface {\n private pickerEle!: HTMLNanoDatePickerElement;\n private trigger!: HTMLButtonElement;\n private pickerCloseBtn!: HTMLButtonElement;\n private dropdown!: HTMLNanoDropdownElement;\n private input: HTMLNanoInputElement;\n private pickerOpenSource: 'key' | 'mouse';\n\n private directInput = false;\n private dateOrderIndeces = { d: 0, m: 1, y: 3 };\n private inputId = `nano-input-${inputIds++}`;\n private locale =\n (window.navigator.languages as string[]) ||\n window.navigator.language ||\n undefined;\n\n @Element() host: HTMLNanoDateInputElement;\n\n // Private state\n\n @State() pattern!: string;\n @State() inputValue: string;\n\n // Public Api / Prop\n\n /**\n * This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n */\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n @State() _invalid = false;\n\n /**\n * Current validation message - if any. @readonly\n */\n @Prop()\n get validityMessage() {\n if (!this.input) return '';\n return this.input.validityMessage;\n }\n\n /**\n * Whether to show a long form, confirmation date string of the one currently entered\n */\n @Prop() helperText: boolean = true;\n\n /**\n * Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.\n */\n @Prop() helperTextFormat: LocalDateOpts = {\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n };\n\n /**\n * Enable floating label behaviour. Will disable placeholder if set.\n */\n @Prop() floatLabel: boolean = false;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * If `true`, the user cannot modify the value.\n */\n @Prop() readonly = false;\n\n /**\n * The initial size (number of characters) of the control.\n */\n @Prop() size?: number;\n\n /**\n * The form element to associate the select with (its form owner). Must be the id of a form.\n */\n @Prop() form?: string | null;\n\n /**\n * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday.\n */\n @Prop() firstDayOfWeek?: DaysOfWeek;\n\n /**\n * Button labels, day names, month names, etc, used for localization.\n * Default is English.\n */\n @Prop() localization?: DuetLocalizedText;\n\n /**\n * If `true`, the user cannot interact with the input.\n */\n @Prop() disabled = false;\n\n /**\n * The color to use from the application's color palette.\n */\n @Prop() color?: Color;\n\n /**\n * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n */\n @Prop() autofocus = false;\n\n /**\n * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n */\n @Prop() clearInput = false;\n\n /**\n * String to place within a label element. Alternatively you may use a label slot.\n */\n @Prop() label?: string;\n\n /**\n * Instructional text that shows before the input has a value.\n * The pattern prop will be used to create a placeholder automatically if unused.\n */\n @Prop({ mutable: true }) placeholder: string;\n\n /**\n * Current value. Must be in IS0-8601 format: YYYY-MM-DD.\n */\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n @Watch('value')\n handleValueChange() {\n if (!this.directInput) this.inputValue = this.formatIsoDate(this.value);\n setTimeout(() => {\n this.nanoChange.emit({\n value: this.value,\n date: parseISODate(this.value),\n });\n }, 20);\n this.directInput = false;\n }\n\n /**\n * When should the field perform validation\n */\n @Prop() validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n 'submitThenDirty';\n\n /**\n * Whether to show validation errors underneath input\n */\n @Prop({ reflect: true }) showInlineError = true;\n\n /**\n * The order of the date parts for entry and display.\n * e.g. dmy = dd mm yyyy\n */\n @Prop() dateOrder: 'dmy' | 'mdy' | 'ymd' | 'dym' = 'dmy';\n\n @Watch('dateOrder')\n handleDateOrderChange() {\n this.setDatePattern();\n }\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required = false;\n\n /**\n * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n */\n @Prop() min?: string;\n\n /**\n * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n */\n @Prop() max?: string;\n\n /**\n * Visually hide the label - but make it accessible.\n */\n @Prop() hideLabel?: boolean = false;\n\n @Watch('min')\n @Watch('max')\n @Watch('value')\n testDateValidity() {\n const valueDate = parseISODate(this.value);\n\n let min: Date,\n max: Date,\n error: string = '';\n\n if (this.value && valueDate) {\n if (this.min && (min = parseISODate(this.min)) && valueDate < min) {\n error =\n 'Date below the minimum: ' +\n min.toLocaleDateString(this.locale, this.helperTextFormat);\n }\n if (this.max && (max = parseISODate(this.max)) && valueDate > max) {\n error =\n 'Date above the maximum: ' +\n max.toLocaleDateString(this.locale, this.helperTextFormat);\n }\n if (this.isDateDisabled(valueDate)) {\n error = 'Date selected is disabled.';\n }\n }\n\n requestAnimationFrame(async (_) => {\n if (!this.input) return;\n const input = await this.input.getInputElement();\n if (this.value.length && !valueDate) error = 'Please enter a valid date';\n\n input.setCustomValidity(error);\n if (this.input.validateOn === 'dirty') {\n this.input.showError(error);\n }\n });\n }\n\n /**\n * Show a date picker. Date pickers are not very useful\n * if the potential input is too far in the distance or past\n * e.g. Birthdays\n */\n @Prop() picker: boolean = true;\n\n /**\n * Initial picker date. Will be to `value` if set. Will be today's date if nothing set.\n * Must be in IS0-8601 format: YYYY-MM-DD.\n */\n @Prop() initialPickerDate?: string;\n\n /**\n * Set / read whether the picker is currently open.\n */\n @Prop({ reflect: true, mutable: true }) pickerOpen: boolean = false;\n\n @Watch('pickerOpen')\n handlePickerOpenChange() {\n this.dropdown.open = this.pickerOpen;\n }\n\n /**\n * Close the picker after a date is selected\n */\n @Prop() closeAfterPicked: boolean = true;\n\n /** nano-dropdown config options you can pass to the nested dropdown component */\n @Prop()\n get dropDownConfig() {\n return this._dropDownConfig;\n }\n set dropDownConfig(ddc: Partial<Dropdown>) {\n this._dropDownConfig = { ...this._dropDownConfig, ...ddc };\n }\n private _dropDownConfig: Partial<Dropdown> = {};\n\n /** @readonly get the value as a `Date` */\n @Prop()\n get dateValue() {\n return parseISODate(this.value);\n }\n\n /** Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n * @returns `false` for not disabled and `true` for disabled */\n @Prop() isDateDisabled: DateDisabledPredicate = () => false;\n\n // Event emitters\n\n /**\n * Event emitted when a date is selected.\n */\n @Event() nanoChange: EventEmitter<DateInputChangeEventDetail>;\n\n /**\n * Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n */\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // Methods\n\n /**\n * Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }`\n */\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n const initValidity = await this.input.reportValidity(validateFirst);\n if (initValidity.isValid && validateFirst) this.testDateValidity();\n return await this.input.reportValidity(validateFirst);\n }\n\n /**\n * Sets focus on the child `nano-input`.\n */\n @Method()\n async setFocus() {\n if (this.input) this.input.setFocus();\n }\n\n /**\n * Returns the native `<input>` element used under the hood.\n * @returns `HTMLInputElement`\n */\n @Method()\n async getInputElement() {\n return await this.input.getInputElement();\n }\n\n /**\n * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n */\n @Method()\n async showError(message: string) {\n if (!this.input) return;\n this.input.showError(message);\n }\n\n // Event handlers\n\n private onInputChange = (e: NanoInputCustomEvent<InputChangeEventDetail>) => {\n e.stopPropagation();\n this.setValue(e.target.value);\n };\n\n private onInputValidate = (e: CustomEvent<ControlValidityEventDetail>) => {\n e.stopPropagation();\n this._invalid = !e.detail.isValid;\n\n this.nanoValidate.emit({\n isValid: e.detail.isValid,\n errorMessage: e.detail.errorMessage,\n originalEvent: e.detail.originalEvent,\n });\n };\n\n private onInputKey = () => {\n this.directInput = true;\n };\n\n private onDatePicked = (e: { detail: PickerChangeEvent }) => {\n this.directInput = false;\n this.value = e.detail.value;\n if (this.closeAfterPicked) this.pickerOpen = false;\n };\n\n private onDropdownHide = () => {\n setTimeout((_) => (this.pickerOpen = false), 200);\n setTimeout((_) => this.trigger.focus(), 50);\n };\n\n private onDropdownShow = () => {\n setTimeout((_) => {\n this.pickerEle.setFocus(false, this.pickerOpenSource === 'key');\n this.pickerOpenSource = null;\n }, 200);\n };\n\n private onTriggerClick = () => {\n if (!this.pickerOpen) {\n this.pickerOpen = true;\n this.pickerOpenSource = 'mouse';\n }\n };\n\n private onTriggerKey = (e: KeyboardEvent) => {\n if ([' ', 'Enter'].includes(e.key)) {\n if (!this.pickerOpen) {\n this.pickerOpen = true;\n this.pickerOpenSource = 'key';\n }\n }\n };\n\n private onCloseClick = () => {\n if (this.pickerOpen) this.pickerOpen = false;\n };\n\n private onCloseKeyDown = (e: KeyboardEvent) => {\n // this ensures focus is trapped inside the picker\n if (e.key === 'Tab' && e.shiftKey) {\n this.pickerEle.setFocus(true);\n e.preventDefault();\n }\n if (e.key === ' ' || e.key === 'Enter') {\n if (this.pickerOpen) this.pickerOpen = false;\n }\n };\n\n // Private logic\n\n // set the regexp input pattern and placeholder (if necessary)\n private setDatePattern() {\n const dateRegexOrdered = [];\n const dateStrOrd = [];\n Array.from(this.dateOrder).map((datepart, i) => {\n dateRegexOrdered.push(DateRegxps[datepart]);\n this.dateOrderIndeces[datepart] = i;\n dateStrOrd.push(datepart === 'y' ? 'yyyy' : datepart + datepart);\n });\n this.pattern = dateRegexOrdered.join('\\\\W+');\n\n if (!this.placeholder && this.placeholder !== 'false')\n this.placeholder = dateStrOrd.join(' ');\n }\n\n // set the public facing date string\n private formatIsoDate(isoDate: string) {\n const dateRegexOrdered = [];\n Array.from('ymd').map((datepart) =>\n dateRegexOrdered.push(DateRegxps[datepart])\n );\n const matches = isoDate.match(new RegExp(dateRegexOrdered.join('\\\\W+')));\n if (!matches) return '';\n\n const formatted = [];\n formatted[this.dateOrderIndeces.d] = matches[3];\n formatted[this.dateOrderIndeces.m] = matches[2];\n formatted[this.dateOrderIndeces.y] = matches[1];\n\n return formatted.join(' ');\n }\n\n // on manual user entry, set the value that will be sent with the form field\n private setValue(inputValue: string) {\n const matches = inputValue.match(new RegExp(this.pattern));\n\n // it's an invalid date, but we still need to set it\n if (!matches) {\n this.value = inputValue;\n return;\n }\n\n let date = createDate(\n matches[this.dateOrderIndeces.y + 1],\n matches[this.dateOrderIndeces.m + 1],\n matches[this.dateOrderIndeces.d + 1]\n );\n\n if (!date) {\n // last ditch attempt - see if the browser can get something\n date = new Date(inputValue);\n\n // it's definitely an invalid date, but set it anyway for validation messages\n if (!date) {\n this.value = inputValue;\n return;\n }\n }\n\n const dateStr = printISODate(date);\n this.value = dateStr;\n return dateStr;\n }\n\n connectedCallback() {\n this.setDatePattern();\n this.handleValueChange();\n }\n\n componentDidLoad() {\n if (!this.pickerCloseBtn || !this.picker) return;\n this.pickerEle.firstFocusEle = this.pickerCloseBtn;\n this.dropdown.tetherTo = this.trigger;\n setTimeout((_) => this.handlePickerOpenChange(), 300);\n }\n\n render() {\n this.locale =\n (navigator.languages as string[]) || navigator.language || undefined;\n\n this.dropDownConfig.placement =\n this.dropDownConfig.placement || 'bottom-end';\n\n if (this.host.ownerDocument.dir === 'rtl') {\n this.dropDownConfig.placement.replace('start', 'end');\n }\n if (this.trigger) this.dropDownConfig.tetherTo = this.trigger;\n\n const valueDate = parseISODate(this.value);\n const hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n return (\n <Host class={{ ...createColorClasses(this.color), 'date-input': true }}>\n <div class=\"date-field\">\n <nano-input\n class=\"date-field__input\"\n slot=\"trigger\"\n required={this.required || undefined}\n showInlineError={this.showInlineError}\n validateOn={this.validateOn}\n placeholder={\n this.placeholder !== 'false' ? this.placeholder : undefined\n }\n pattern={this.pattern}\n label={this.label}\n disabled={this.disabled || undefined}\n color={this.color || undefined}\n autofocus={this.autofocus || undefined}\n clearInput={this.clearInput || undefined}\n onNanoChange={this.onInputChange}\n onNanoInput={this.onInputKey}\n onNanoValidate={this.onInputValidate}\n name=\"\"\n form={this.form || undefined}\n size={this.size || undefined}\n readonly={this.readonly}\n value={this.inputValue}\n ref={(input) => (this.input = input)}\n floatLabel={this.floatLabel}\n hideLabel={this.hideLabel}\n inputmode={'numeric'}\n part=\"input\"\n >\n <slot name=\"start\" slot=\"start\" />\n <slot name=\"label\" slot=\"label\" />\n <slot name=\"end\" slot=\"end\" />\n {this.picker && [\n <button\n slot=\"end\"\n class=\"date-field__open\"\n type=\"button\"\n onKeyDown={this.onTriggerKey}\n onClick={this.onTriggerClick}\n ref={(trigger) => (this.trigger = trigger)}\n disabled={this.disabled || this.readonly}\n >\n <nano-icon name=\"light/calendar-days\"></nano-icon>\n </button>,\n\n <nano-dropdown\n slot=\"end\"\n onNanoHide={this.onDropdownHide}\n onNanoShow={this.onDropdownShow}\n dialogTitle=\"Choose a date\"\n class=\"date-field__dropdown\"\n ref={(dropdown) => (this.dropdown = dropdown)}\n {...this.dropDownConfig}\n part=\"dropdown\"\n >\n <div>\n <div class=\"date-field__close-bar\">\n <button\n class=\"date-field__close\"\n type=\"button\"\n onMouseDown={this.onCloseClick}\n onKeyDown={this.onCloseKeyDown}\n ref={(pickerClose) => (this.pickerCloseBtn = pickerClose)}\n >\n <nano-icon name=\"light/xmark\"></nano-icon>\n <span class=\"vhidden\">Close window</span>\n </button>\n </div>\n <nano-date-picker\n isDateDisabled={this.isDateDisabled}\n onNanoDatePicked={this.onDatePicked}\n min={this.min || undefined}\n max={this.max || undefined}\n is-modal\n ref={(picker) => (this.pickerEle = picker)}\n localization={this.localization}\n selectedDate={this.value || this.initialPickerDate}\n firstDayOfWeek={this.firstDayOfWeek}\n color={this.color || undefined}\n part=\"date-picker\"\n ></nano-date-picker>\n </div>\n </nano-dropdown>,\n ]}\n {(hasHelperSlot || this.helperText || this.showInlineError) && (\n <span slot=\"helper\">\n <span class={{ vhidden: !!this.value.length }}>\n <slot name=\"helper\" />\n </span>\n {this.helperText && !!valueDate && (\n <span>\n {valueDate.toLocaleDateString(\n this.locale,\n this.helperTextFormat\n )}\n </span>\n )}\n </span>\n )}\n </nano-input>\n <input type=\"hidden\" value={this.value} name={this.name} />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nano-date-picker.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"file":"nano-date-picker.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nano-details.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"nano-details.js","mappings":"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","names":[],"sources":["src/components/details/details.scss?tag=nano-details&encapsulation=shadow","src/components/details/details.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n /**\n * @prop --padding: Default to 1em;\n\n * @prop --btn-padding: Defaults to var(--padding);\n * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{map.get(tokens.$colors, offwhite)});\n\n * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n * @prop --transition-duration: Time it takes to slide down and show content. Defaults to .2s;\n\n * @prop --border-width: Defaults to none;\n * @prop --border-color: Defaults to none;\n * @prop --border-style: Defaults to none;\n * @prop --border-radius: Defaults to none;\n * @prop --box-shadow: Defaults to none;\n * @prop --focus-style: Defaults to #{tokens.$control-focus-style}\n */\n\n @include mx.text-inherit();\n\n --padding: 1em;\n --btn-padding: var(--padding);\n --content-padding: var(--padding);\n --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n --btn-bg-color--hover: var(--nano-color-tint, #{map.get(tokens.$colors, offwhite)});\n --btn-text-color: var(--nano-color-base, #455556);\n --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n --transition-duration: 0.2s;\n --border-width: none;\n --border-color: none;\n --border-style: none;\n --border-radius: none;\n --box-shadow: none;\n --focus-style: #{tokens.$control-focus-style};\n\n display: block;\n border-style: var(--border-style);\n border-width: var(--border-width-dims);\n border-color: var(--border-color);\n border-radius: var(--border-radius-dims);\n box-shadow: var(--box-shadow);\n}\n\n:host([disabled]) {\n opacity: 0.5;\n}\n\n:host(:last-of-type) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n .open .content {\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n }\n}\n\n:host(:first-of-type) {\n --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n --border-radius-dims: var(--border-radius);\n --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n.header {\n block-size: auto;\n padding: var(--btn-padding);\n text-align: inherit;\n position: relative;\n font-size: 1em;\n line-height: 1;\n margin: 0;\n transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n display: flex;\n align-items: center;\n background: var(--btn-bg-color);\n color: var(--btn-text-color);\n border-radius: var(--border-radius-dims);\n cursor: pointer;\n\n &::-webkit-details-marker {\n display: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n box-shadow: var(--focus-style);\n outline: none;\n position: relative;\n z-index: 1;\n }\n\n &:hover {\n background: var(--btn-bg-color--hover);\n color: var(--btn-text-color--hover);\n }\n\n .open & {\n background: var(--btn-bg-color--open);\n color: var(--btn-text-color--open);\n border-end-end-radius: 0;\n border-end-start-radius: 0;\n }\n\n .disabled & {\n cursor: not-allowed;\n }\n\n .label {\n inline-size: 100%;\n max-inline-size: 100%;\n max-block-size: 100%;\n flex: 1;\n display: inline-block;\n }\n\n .icon {\n line-height: 0;\n flex-direction: column;\n justify-content: center;\n display: inline-block;\n color: currentcolor;\n transition: 0.3s ease transform;\n transform-origin: center;\n\n &--start {\n margin-inline: 0 var(--btn-padding);\n margin-block: 0;\n }\n\n &--end {\n margin-inline: var(--btn-padding) 0;\n margin-block: 0;\n }\n\n ::slotted(.nano-icon) {\n --color: currentcolor;\n }\n }\n}\n\n.body {\n overflow: hidden;\n transition: height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;\n outline: none;\n\n > * {\n .is-hidden & {\n animation: fade .1s ease reverse;\n }\n\n .open & {\n animation: fade var(--transition-duration, 0.3s) ease forwards;\n }\n }\n}\n\n.content {\n padding: var(--content-padding);\n}\n\n@keyframes fade {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Prop,\n Element,\n Watch,\n Build,\n Host,\n} from '@stencil/core';\nimport { displayTransition } from '../../utils/transitions';\nimport { h } from '../../utils/renderer';\n\n/**\n * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n *\n * @part base - the root `details` element\n * @part header - the main `summary` ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part body - the wrapper around content\n * @part content - the main content wrapper\n */\n@Component({\n tag: 'nano-details',\n styleUrl: 'details.scss',\n shadow: true,\n})\nexport class Details {\n private hasStartSlot: boolean;\n private hasEndSlot: boolean;\n private mo?: MutationObserver;\n private stateChanging: boolean = false;\n private bodyEl: HTMLElement;\n private detailsEl: HTMLDetailsElement;\n private headerEl: HTMLElement;\n private contentEl: HTMLDivElement;\n private cacheHeight: number;\n\n @Element() private host: HTMLNanoDetailsElement;\n\n /** Summary / handle text. Use the `label` slot for HTML markup */\n @Prop() label: string = '';\n\n /** Should item be open on load */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /** Disables the details so it can't be toggled. */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Hide the handle. (You will need to control the hiding / showing of content with script) */\n @Prop() noHandle: boolean = false;\n\n /** Icon slot rotation amount (degrees) on open */\n @Prop() iconRotation: number = 90;\n\n /**\n * Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\n * Set `useCacheHeight` to `true` try to keep animations smooth. */\n @Prop() useCacheHeight = false;\n\n /**\n * Emitted when the component opens.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoOpened: EventEmitter;\n\n /**\n * Emitted when the component closes.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoClosed: EventEmitter;\n\n /** Emitted after the details opens and all transitions are complete. */\n @Event() nanoAfterOpened: EventEmitter;\n\n /** Emitted after the details closes and all transitions are complete. */\n @Event() nanoAfterClosed: EventEmitter;\n\n @Watch('open')\n toggleClick() {\n this.stateChanging = true;\n if (this.open) this.show();\n else this.hide();\n }\n\n private onKeyDown = (e: KeyboardEvent) => {\n if (this.stateChanging || this.disabled) return;\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n this.open = !this.open;\n break;\n case 'ArrowUp':\n e.preventDefault();\n this.open = false;\n break;\n case 'ArrowDown':\n e.preventDefault();\n this.open = true;\n break;\n }\n };\n\n private onMouseDown = (e: MouseEvent) => {\n e.preventDefault();\n this.headerEl.focus();\n\n if (this.stateChanging || this.disabled) return;\n this.open = !this.open;\n };\n\n private hide() {\n const nanoClose = this.nanoClosed.emit(this.open);\n\n if (nanoClose.defaultPrevented) {\n this.open = true;\n this.detailsEl.open = true;\n return;\n }\n\n this.cacheHeight = this.contentEl.scrollHeight;\n this.bodyEl.style.height = this.cacheHeight + 'px';\n\n displayTransition(this.bodyEl, {\n className: 'is-shown',\n show: false,\n transitionProp: ['height'],\n }).then(() => {\n this.stateChanging = false;\n this.detailsEl.open = false;\n this.bodyEl.classList.add('is-hidden');\n this.nanoAfterClosed.emit();\n });\n\n // requestAnimationFrame doesn't trigger transitionend event for firefox :/\n setTimeout(() => {\n this.bodyEl.style.height = '0px';\n });\n }\n\n private show() {\n const nanoOpen = this.nanoOpened.emit();\n this.detailsEl.open = true;\n\n if (nanoOpen.defaultPrevented) {\n this.open = false;\n this.detailsEl.open = false;\n return;\n }\n\n displayTransition(this.bodyEl, {\n className: 'is-shown',\n show: true,\n transitionProp: ['height'],\n }).then(() => {\n this.stateChanging = false;\n this.bodyEl.style.height = 'auto';\n this.nanoAfterOpened.emit();\n });\n\n this.bodyEl.style.height =\n (this.useCacheHeight && this.cacheHeight\n ? this.cacheHeight\n : this.contentEl.scrollHeight) + 'px';\n }\n\n private attachMo() {\n if (this.mo || !this.detailsEl || !Build.isBrowser) return;\n\n this.mo = new MutationObserver((changes) => {\n if (this.stateChanging) return;\n\n for (const change of changes) {\n if (change.type === 'attributes' && change.attributeName === 'open') {\n this.open = this.detailsEl.open;\n }\n }\n });\n this.mo.observe(this.detailsEl, { attributes: true });\n }\n\n componentWillLoad() {\n this.hasStartSlot = !!this.host.querySelector('[slot=\"icon-start\"]');\n this.hasEndSlot = !!this.host.querySelector('[slot=\"icon-end\"]');\n }\n\n componentDidLoad() {\n this.bodyEl.style.height = this.open ? 'auto' : '0';\n if (this.open) this.detailsEl.setAttribute('open', 'true');\n this.attachMo();\n }\n\n connectedCallback() {\n this.attachMo();\n }\n\n disconnectedCallback() {\n if (this.mo) {\n this.mo.disconnect();\n this.mo = undefined;\n }\n }\n\n render() {\n return (\n <Host class=\"nano-details\">\n <details\n part=\"base\"\n ref={(d: HTMLDetailsElement) => (this.detailsEl = d)}\n class={{\n details: true,\n open: this.open,\n disabled: this.disabled,\n }}\n >\n <summary\n part=\"header\"\n aria-controls=\"content\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n tabindex={this.disabled ? '-1' : '0'}\n style={{ display: this.noHandle ? 'none' : '' }}\n id=\"header\"\n role=\"button\"\n class=\"header\"\n ref={(s) => (this.headerEl = s)}\n onKeyDown={this.onKeyDown}\n onClick={this.onMouseDown}\n >\n {this.hasStartSlot ? (\n <span\n part=\"icon--start\"\n class=\"icon icon--start\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-start\" />\n </span>\n ) : (\n ''\n )}\n <div part=\"label\" class=\"label\">\n {this.label ? this.label : <slot name=\"label\" />}\n </div>\n {this.hasEndSlot ? (\n <span\n part=\"icon--end\"\n class=\"icon icon--end\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-end\" />\n </span>\n ) : (\n ''\n )}\n </summary>\n <div\n part=\"body\"\n class=\"body\"\n ref={(div) => (this.bodyEl = div)}\n tabindex=\"-1\"\n role=\"region\"\n aria-labelledby=\"header\"\n >\n <div\n part=\"content\"\n ref={(div) => (this.contentEl = div)}\n class=\"content\"\n id=\"content\"\n >\n <slot />\n </div>\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nano-dialog.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"nano-dialog.js","mappings":"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","names":[],"sources":["src/components/dialog/dialog.scss?tag=nano-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/nano-theme/tokens';\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @prop --border-radius: defaults to #{tokens.$layer-border-radius};\n * @prop --content-background: defaults to #{tokens.$layer-bg-color};\n * @prop --footer-background: defaults to #{map.get(tokens.$colors, celsius)};\n * @prop --box-shadow: defaults to $layer-shadow-xlarge;\n * @prop --close-button-color: defaults to #{map.get(tokens.$colors, palegrey)};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{tokens.$layer-overlay-dark};\n * @prop --tint-color: colour used to highlight items in the dialog - top ribbon, bottom close button. Default #{map.get(tokens.$colors, blue)};\n * @prop --width: defaults to 60rem;\n * @prop --height: defaults to auto;\n * @prop --nano-layer-overlay-blur: inheritable theme applied to backdrop. Default to #{tokens.$layer-overlay-blur}\n */\n:host {\n --border-radius: #{tokens.$layer-border-radius};\n --content-background: #fafafa;\n --footer-content: #{map.get(tokens.$colors, lightgrey)};\n --scrim-color: #{tokens.$layer-overlay-dark};\n --box-shadow: #{tokens.$layer-shadow-large};\n --close-button-color: #{map.get(tokens.$colors, palegrey)};\n --width: 60rem;\n --height: auto;\n --tint-color: #{darken(map.get(tokens.$colors, blue), 5%)};\n --body-padding-v: #{tokens.$spacing-large};\n --body-padding-h: #{tokens.$spacing-large};\n --header-padding-v: #{tokens.$spacing-medium};\n --header-padding-h: #{tokens.$spacing-large};\n --footer-padding-v: #{tokens.$spacing-medium};\n --footer-padding-h: #{tokens.$spacing-large};\n}\n\n.dialog {\n $self: &;\n\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n inset: 0;\n z-index: #{tokens.$layer-index-modal};\n\n // reset native popover styles\n border: none;\n inline-size: unset;\n block-size: unset;\n color: unset;\n background-color: unset;\n\n &::backdrop { display: none; }\n\n &__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n inline-size: var(--width);\n block-size: var(--height);\n max-inline-size: calc(100% - (#{tokens.$spacing-xlarge} + var(--nano-scroll-lock-size)));\n max-block-size: calc(92vh - #{tokens.$spacing-xlarge});\n background-color: var(--content-background);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n opacity: 0;\n transform: scale(0.8);\n transition: #{tokens.$transition-fast} opacity, #{tokens.$transition-fast} transform;\n\n &:focus {\n outline: none;\n }\n\n .dialog--with-ribbon & {\n border-block-start: 5px solid var(--tint-color);\n }\n\n .dialog--open & {\n display: flex;\n opacity: 1;\n transform: none;\n }\n\n .dialog--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\n &__header {\n flex: 0 0 auto;\n display: flex;\n inline-size: 100%;\n background-color: var(--content-background);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n transition: #{tokens.$transition-xfast} box-shadow;\n min-inline-size: auto;\n\n [stuck] & {\n box-shadow: #{tokens.$layer-shadow-medium};\n }\n }\n\n &__title {\n flex: 1 1 auto;\n font-size: #{tokens.$fontsize-large};\n line-height: 1.6;\n padding-block: var(--header-padding-v);\n padding-inline: var(--header-padding-h);\n }\n\n & &__close-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: #{tokens.$fontsize-xlarge};\n padding-block: 0;\n padding-inline: var(--header-padding-h);\n\n --color: var(--close-button-color);\n }\n\n &__body {\n padding-block: 0 var(--body-padding-v);\n padding-inline: var(--body-padding-h);\n\n .dialog:not(.dialog--has-header) & {\n padding-block-start: var(--body-padding-v);\n }\n\n & ::slotted(*) {\n max-inline-size: 100%;\n }\n\n &-wrap {\n flex: 1 1 auto;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n border-radius: var(--border-radius);\n\n .dialog:not(.dialog--has-header) & {\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n border-end-start-radius: inherit;\n border-end-end-radius: inherit;\n }\n\n .dialog:not(.dialog--has-footer) & {\n border-start-start-radius: inherit;\n border-start-end-radius: inherit;\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n }\n }\n\n &__footer {\n inline-size: 100%;\n padding-block: var(--footer-padding-v);\n padding-inline: var(--footer-padding-h);\n background: var(--footer-content);\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n position: relative;\n inset-block-start: 1px;\n min-inline-size: auto;\n\n ::slotted(button) {\n margin-inline-end: #{tokens.$spacing-small} !important;\n }\n\n .dialog:not(.dialog--has-footer) & {\n display: none;\n }\n }\n\n &__close-txt {\n color: var(--tint-color);\n border: none;\n text-decoration: underline;\n margin: 0;\n text-underline-offset: 4px;\n background-color: transparent;\n font: inherit;\n -webkit-box-align: center;\n cursor: pointer;\n font-size: #{tokens.$fontsize-small};\n padding: 0.5rem;\n border-radius: #{tokens.$border-radius-small};\n transition: box-shadow 100ms ease-in-out;\n\n &:focus {\n outline: none;\n box-shadow: #{tokens.$control-focus-style};\n }\n }\n\n &__overlay {\n position: fixed;\n inset: 0 !important;\n background-color: var(--scrim-color);\n opacity: 0;\n transition: #{tokens.$transition-fast} opacity;\n backdrop-filter: blur(#{tokens.$layer-overlay-blur});\n\n .dialog--open & {\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n Host,\n ComponentInterface,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/**\n * Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n *\n * @part base - The component’s base wrapper\n * @part overlay - The overlay that covers the screen behind the dialog\n * @part panel - The dialog’s panel (where the dialog and its content are rendered)\n * @part header - The dialog’s header. This element wraps the title and header actions\n * @part title - The dialog’s title\n * @part close-button - The `<nano-icon-button>` close button\n * @part close-button__base - The close button's exported `base` part\n * @part body - dilog body / content\n * @part footer - dialog footer bar\n *\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n * @slot - The dialog's content.\n */\n@Component({\n tag: 'nano-dialog',\n styleUrl: 'dialog.scss',\n shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n private componentId = `dialog-${++id}`;\n private modal: Modal;\n private willShow = false;\n private willHide = false;\n private originalTrigger: HTMLElement | null;\n private overlay: HTMLElement;\n private dialog: HTMLElement;\n\n get panel() {\n return this._panel;\n }\n set panel(p: HTMLElement) {\n if (this._panel) {\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n p.addEventListener('transitionend', this.handleTransitionEnd);\n this._panel = p;\n }\n private _panel: HTMLElement;\n\n @Element() host: HTMLNanoDialogElement;\n @State() noDismiss = false;\n @State() hasFooter = false;\n @State() hidden = true;\n\n /** Show a colour ribbon at the top of the modal */\n @Prop() showRibbon = true;\n\n /** Indicates whether or not the dialog 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.open) this.show();\n else this.hide();\n }\n\n /** The dialog's label as displayed in the header. You should always include a relevant\n * label even when using `no-header`, as it is required for proper accessibility. */\n @Prop() label!: string;\n\n /** Set to true to disable the header. This will also remove the default close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. */\n @Prop() noHeader = false;\n\n /** Set to true to disable the footer. This will also remove the footer close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. */\n @Prop() noFooter = false;\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 /** 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 /** 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 native popover is supported then bail as this is not required\n if (\n 'popover' in globalThis.HTMLElement.prototype ||\n !this.hoist ||\n Array.from(document.body.children).includes(this.host)\n )\n return;\n document.body.prepend(this.host);\n }\n\n /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n @Event() nanoShow: EventEmitter;\n\n /** Emitted after the dialog opens and all transitions are complete. */\n @Event() nanoAfterShow: EventEmitter;\n\n /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n @Event() nanoHide: EventEmitter;\n\n /** Emitted after the dialog closes and all transitions are complete. */\n @Event() nanoAfterHide: EventEmitter;\n\n /** Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n * focus and allow you to set it on a different element in the dialog, such as an input or button. */\n @Event() nanoInitialFocus: EventEmitter;\n\n /** Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. */\n @Event() nanoRequestClose: EventEmitter;\n\n /** Shows the dialog */\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n if (this.dialog) this.dialog.hidden = false;\n this.originalTrigger = document.activeElement as HTMLElement;\n this.willShow = true;\n\n this.hidden = false;\n this.open = true;\n this.modal.activate();\n\n if (typeof this.dialog?.showPopover === 'function') {\n this.dialog.showPopover();\n }\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n // Wait for the next frame before setting initial focus so the dialog is technically visible\n this.host.addEventListener(\n 'nanoAfterShow',\n () => {\n const nanoInitialFocus = this.nanoInitialFocus.emit();\n if (!nanoInitialFocus.defaultPrevented) {\n this.panel.focus({ preventScroll: true });\n }\n },\n { once: true }\n );\n }\n }\n\n /** Hides the dialog */\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const nanoHide = this.nanoHide.emit();\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n this.stopVideos();\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (trigger && typeof trigger.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n\n setTimeout(() => {\n if (!this.open && typeof this.dialog?.hidePopover === 'function') {\n this.dialog.hidePopover();\n }\n unlockBodyScrolling(this.host);\n }, 300);\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n this.hide();\n } else {\n this.noDismiss = true;\n setTimeout(() => (this.noDismiss = false), 250);\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 // Ensure we only emit one event when the target element is no longer visible\n this.willShow = false;\n this.willHide = false;\n\n if (this.open) this.nanoAfterShow.emit();\n else this.nanoAfterHide.emit();\n\n if (!this.open) {\n this.dialog.hidden = true;\n this.hidden = true;\n }\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n private stopVideos() {\n const videos: (HTMLVideoElement | HTMLIFrameElement)[] = Array.from(\n this.host.querySelectorAll('iframe,video')\n );\n videos.forEach((video) => {\n if (video.tagName.toLowerCase() === 'video')\n (video as HTMLVideoElement).pause();\n else {\n const src = video.src;\n video.src = src;\n }\n });\n }\n\n connectedCallback() {\n this.handleHoistChange();\n this.modal = new Modal(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.dialog.hidden = !this.open;\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n if (!this.panel) return;\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n\n render() {\n return (\n <Host class=\"nano-dialog\">\n <div\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--has-footer': !this.noFooter,\n 'dialog--has-header': !this.noHeader,\n 'dialog--nodismiss': this.noDismiss,\n 'dialog--with-ribbon': this.showRibbon,\n }}\n onKeyDown={this.handleKeyDown}\n ref={(ele) => (this.dialog = ele)}\n popover=\"manual\"\n >\n <div\n part=\"overlay\"\n class=\"dialog__overlay\"\n ref={(el) => (this.overlay = el)}\n onClick={this.requestClose}\n />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={!this.hidden ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={\n !this.noHeader ? `${this.componentId}-title` : null\n }\n tabIndex={-1}\n >\n <div class=\"dialog__body-wrap\">\n {!this.noHeader && (\n <nano-sticker>\n <header part=\"header\" class=\"dialog__header\">\n <span\n part=\"title\"\n class=\"dialog__title\"\n id={`${this.componentId}-title`}\n >\n <slot name=\"label\">\n {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label || String.fromCharCode(65279)}\n </slot>\n </span>\n {!this.noUserDismiss && (\n <nano-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n class=\"dialog__close-icon\"\n label=\"close dialog\"\n onClick={this.requestClose}\n iconName=\"light/xmark\"\n />\n )}\n </header>\n </nano-sticker>\n )}\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n {!this.noFooter && (this.hasFooter || !this.noUserDismiss) && (\n <nano-sticker position=\"bottom\">\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n {!this.noUserDismiss && (\n <button\n class=\"dialog__close-txt\"\n onClick={this.requestClose}\n >\n Close\n </button>\n )}\n </footer>\n </nano-sticker>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nano-drawer.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"nano-drawer.js","mappings":"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","names":[],"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/tokens';\n\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 #{tokens.$layer-shadow-xlarge};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{tokens.$layer-overlay-dark};\n * @prop --footer-background: Defaults to #{map.get(tokens.$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 #{tokens.$spacing-medium} #{tokens.$spacing-large}\n * @prop --header-button-color: defaults to #{map.get(tokens.$colors, palegrey)};\n */\n\n --size: 25rem;\n --panel-background: white;\n --panel-shadow: #{tokens.$layer-shadow-xlarge};\n --scrim-color: #{tokens.$layer-overlay-dark};\n --header-button-color: #{map.get(tokens.$colors, palegrey)};\n --footer-background: #{map.get(tokens.$colors, lightgrey)};\n --header-background: var(--panel-background);\n --header-spacing: #{tokens.$spacing-large};\n --body-spacing: #{tokens.$spacing-large};\n --footer-spacing: #{tokens.$spacing-medium} #{tokens.$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: #{tokens.$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: #{tokens.$transition-fast} opacity, #{tokens.$transition-fast} transform;\n display: flex;\n flex-direction: column;\n\n @media (forced-colors: active) {\n border: solid 1px #{map.get(tokens.$colors, black)};\n }\n\n &:focus {\n outline: none;\n }\n\n .drawer--nodismiss & {\n animation: cannotClose 0.25s ease-in-out 1;\n // transform-origin: center center;\n\n @keyframes cannotClose {\n 0% {\n scale: 1;\n }\n\n 50% {\n scale: 1.08;\n }\n\n 100% {\n 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 opacity: 1;\n transform: translateX(0);\n }\n\n .drawer--end.drawer--open & {\n opacity: 1;\n transform: translateX(calc(var(--nano-scroll-lock-size) * -1));\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: #{tokens.$layer-shadow-medium};\n }\n}\n\n.drawer__title {\n flex: 1 1 auto;\n font: inherit;\n font-size: #{tokens.$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: #{tokens.$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: #{tokens.$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: #{tokens.$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(#{tokens.$layer-overlay-blur});\n opacity: 0;\n transition: #{tokens.$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 ComponentInterface,\n Method,\n Host,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\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, mutable: 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 /**\n * Shows the drawer.\n * @returns a promise that resolves when the drawer has finished opening\n */\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 /**\n * Hides the drawer\n * @returns a promise that resolves when the drawer has finished closing\n */\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 if (this.open) this.nanoAfterShow.emit();\n else 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 <Host class=\"nano-drawer\">\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/xmark\"\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 </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nano-dropdown.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"file":"nano-dropdown.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nano-field-validator.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"nano-field-validator.js","mappings":"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","names":[],"sources":["src/components/field-validator/field-validator.tsx"],"sourcesContent":["import {\n Component,\n Prop,\n Host,\n Element,\n ComponentInterface,\n State,\n Watch,\n Event,\n EventEmitter,\n Method,\n Listen,\n} from '@stencil/core';\nimport { createStore, ObservableMap } from '@stencil/store';\nimport { h, transformTag } from '../../utils/renderer';\nimport type {\n NanoFormEles,\n NanoFormEvent,\n PlainFormEles,\n PlainFormEvent,\n ValidationState,\n ValidatorValueStore,\n} from './field-validator-interface';\n\n/**\n * A toolbox for `nano-...` form fields and form validation.\n * - Easy to add validation across field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n * - Easy access to whole form and individual field validity states\n * - Easy access to form data payload\n * = Access to 2-way, data bound reactive store\n * - Scroll to invalid field on submit\n */\n@Component({\n tag: 'nano-field-validator',\n scoped: true,\n})\nexport class FieldValidator implements ComponentInterface {\n // Internal State\n\n @Element() host: HTMLNanoFieldValidatorElement;\n @State() submitted = false;\n @State() userForm: HTMLFormElement;\n @Watch('userForm')\n userFormChange() {\n if (this.userForm) this.activeForm = this.userForm;\n }\n\n private get activeForm() {\n return this._activeForm;\n }\n private set activeForm(form: HTMLFormElement) {\n // manages event listners on whatever form is used (slotted on created here)\n if (!form) return;\n\n if (this._activeForm) {\n this._activeForm.removeEventListener(\n 'invalid',\n this.handleFormInvalid,\n true\n );\n }\n form.addEventListener('invalid', this.handleFormInvalid, true);\n this._activeForm = form;\n }\n private _activeForm: HTMLFormElement;\n private mo: MutationObserver;\n private allFields: Array<NanoFormEles | PlainFormEles> = [];\n private nanoFields: NanoFormEles[];\n private plainFields: PlainFormEles[];\n private nanoFieldSelector = `\n nano-input,\n nano-select,\n nano-file-upload,\n nano-date-input,\n nano-checkbox\n `;\n private hasSetStore = false;\n\n // annoyingly, whenever we attempt to `checkValidty()` it fires `invalid` events.\n // this is used to prevent infinite loops / multiple calls\n private internalValidate = false;\n\n // Public API\n\n /** When should the fields perform validation. Will override / sync all nested `nano-...` controls */\n @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n 'submitThenDirty';\n\n /** Sync up validateOn with all fields */\n @Watch('validateOn')\n validateOnChange() {\n this.nanoFields.forEach((field) => {\n if (field.tagName.toLowerCase() === transformTag('nano-checkbox')) {\n const cbg = field.closest<HTMLNanoCheckboxGroupElement>(\n transformTag('nano-checkbox-group')\n );\n if (cbg) cbg.validateOn = this.validateOn;\n } else {\n (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).validateOn =\n this.validateOn;\n }\n });\n }\n\n /** Tries to scroll to the first invalid field on submit */\n @Prop() scrollToInvalid = true;\n\n /** Returns true if any nested fields have been changed @readonly */\n @Prop({ reflect: true })\n get dirty() {\n return this._dirty;\n }\n @State() _dirty = false;\n\n /** Returns true if all the nested fields are currently valid @readonly */\n @Prop({ reflect: true })\n get valid() {\n return this._valid;\n }\n @State() _valid: boolean;\n\n /** The current form state as a stencil store. */\n @Prop() get store(): ObservableMap<ValidatorValueStore> {\n return this._store;\n }\n @State() _store: ObservableMap<ValidatorValueStore>;\n\n /** The current form payload as a reactive proxy. @readonly */\n @Prop()\n get payload() {\n return this._store?.state;\n }\n\n /** Returns true if validation errors will be displayed to the user. @readonly */\n @Prop()\n get showValidation() {\n return (this.validateOn === 'dirty' && this.dirty) || this.submitted;\n }\n\n /** Get the current validation state of all form fields. @readonly\n * ```\n {\n fields: NanoFormEles[];\n valid: boolean;\n validityMessage: string;\n dirty: boolean;\n name: string | number;\n value: any;\n }[]\n ```\n */\n @Prop()\n get validationState(): ValidationState[] {\n // TODO - migrate nano-fields away from using proprietary methods in a bid to be closer to the spec\n\n // this is big and ugly.\n // why? Cos' it must unify checking validity state for both\n // `nano-...` and plain form fields.\n const validationState: ValidationState[] = [];\n\n this.allFields.forEach(async (field) => {\n const found = validationState.find((v) => v.name === this.getName(field));\n let pf: PlainFormEles;\n let nf: NanoFormEles;\n\n if (found) {\n if ((field as PlainFormEles).validationMessage) {\n // non-nano fields\n pf = field as PlainFormEles;\n found.validityMessage = pf.validationMessage.length\n ? pf.validationMessage\n : found.validityMessage;\n this.internalValidate = true;\n if (found.valid && !pf.checkValidity()) found.valid = false;\n this.internalValidate = false;\n } else if ((field as NanoFormEles).validityMessage) {\n // nano-... fields\n nf = field as NanoFormEles;\n found.validityMessage = nf.validityMessage.length\n ? nf.validityMessage\n : nf.validityMessage;\n if (found.valid && nf.invalid) found.valid = false;\n }\n if (!found.fields.find((f) => f === field)) found.fields.push(field);\n }\n\n let valid: boolean;\n let validityMessage: string;\n\n if ((field as PlainFormEles).checkValidity) {\n pf = field as PlainFormEles;\n this.internalValidate = true;\n valid = pf.checkValidity();\n this.internalValidate = false;\n validityMessage = pf.validationMessage;\n } else {\n nf = field as NanoFormEles;\n valid = !nf.invalid;\n validityMessage = nf.validityMessage;\n }\n\n validationState.push({\n fields: [field],\n name: this.getName(field),\n value: this._store.state[this.getName(field)],\n dirty: false,\n valid,\n validityMessage,\n });\n });\n\n return validationState;\n }\n\n /** By default, `nano-field-validator` will also track all native form field elements.\n * You can add extra web-component form fields to listen to\n * (as long as they match the standard form field spec) by using the `fieldSelector` prop.\n */\n @Prop() extraFieldSelector: string = 'input, select, textarea';\n\n /** A validation callback method.\n * @param field - The field name currently being evaluated\n * @param value - The value of the field currently being evaluated\n * @param fields - an array of all currently observered form fields and values\n * @returns field names mapped to an object of status message and validity e.g.\n * ```js\n * {field1: {msg: `This is invalid!`}, field2: {msg: `This is valid!`, valid: true}}\n * ```\n */\n @Prop() validation: (\n field: string,\n value: string,\n fields: ValidatorValueStore\n ) => { [errorMsg: string]: { fields?: string[]; valid?: boolean } };\n\n /**\n * Sets the state of the form using an object of key / value pairs.\n * @param state - the state to load in the store\n */\n @Method()\n async setStore(state: ValidatorValueStore) {\n this.hasSetStore = true;\n Object.entries(state).forEach(([key, val]) => {\n this.store.state[key] = val;\n });\n }\n\n /**\n * Sets custom validity for all / some form fields.\n * @param validity - a validity object of `{fieldName: errorString}` pairs.\n * Set as an empty string to clear the error.\n * @param scrollToInvalid - whether to scroll to the first invalid field.\n * If not present, will follow the value set on `scrollToInvalid` prop.\n * @returns a promise, resolved when all errors are set\n */\n @Method()\n async setCustomValidity(\n validity: { [key: string]: string },\n scrollToInvalid?: boolean\n ) {\n return await Promise.all(\n Object.entries(validity).map(async ([key, err]) => {\n const field = this.allFields.find((f) => this.getName(f) === key);\n if (field) await this.setFieldError(field, err);\n })\n ).finally(() => {\n this.scrollToFirstInvalid(scrollToInvalid);\n });\n }\n\n /**\n * Clear all custom validation.\n * @returns a promise, resolved when all errors are cleared\n */\n @Method()\n async resetValidity() {\n return await Promise.all(\n this.allFields.map(async (field) => await this.setFieldError(field, ''))\n );\n }\n\n /**\n * Scrolls to first invalid form field.\n * @param force - forces the scroll behaviour (default). Otherwise will use the default set in `scrollToInvalid` prop\n */\n @Method()\n async scrollToFirstInvalid(force = true) {\n if (!force && !this.scrollToInvalid) return;\n\n setTimeout(() => {\n const invalidField = this.validationState.find((f) => !f.valid);\n if (!invalidField) return;\n invalidField.fields[0].scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n });\n }, 200);\n }\n\n /** Fired whenever the payload changes */\n @Event() nanoPayloadChange: EventEmitter<ValidatorValueStore>;\n\n /**\n * Fired on valid form submission.\n * Note: if you wish to prevent a form from submitting, instead\n * of using / preventing the native `submit` event, use this event\n * ```js\n * ele.addEventListener('nanoSubmit', (e) => {\n * e.preventDefault()\n * })\n * ```\n */\n @Event() nanoSubmit: EventEmitter;\n\n /** Fire on invalid form submission attempt */\n @Event() nanoInvalid: EventEmitter;\n\n // private methods\n\n @Watch('extraFieldSelector')\n attachSlotObserver() {\n if (this.mo) return;\n const mo = (this.mo = new MutationObserver((_entries) => {\n const form = this.host.querySelector('form');\n if (form && form !== this.activeForm) this.activeForm = form;\n this.setupFields();\n }));\n mo.observe(this.host, {\n childList: true,\n attributes: true,\n attributeFilter: ['name'],\n subtree: true,\n });\n }\n\n /**\n * During spec tests, mockelement props aren't set - only attributes.\n * This irons out that kink\n * @param field\n * @returns the fields name prop or attr\n */\n private getName(field: PlainFormEles | NanoFormEles) {\n return field.name || field.getAttribute('name');\n }\n\n /** Checks for new `nano-...` fields and adds them to our watch array and value store */\n private setupFields() {\n let nanoFields = Array.from(\n this.host.querySelectorAll<NanoFormEles>(this.nanoFieldSelector)\n );\n\n let plainFields = Array.from(\n this.host.querySelectorAll<PlainFormEles>(this.extraFieldSelector)\n ).filter((e) => !e.closest(this.nanoFieldSelector));\n\n nanoFields = nanoFields.filter(\n (f) => !!this.getName(f) && !!this.getName(f).length\n );\n plainFields = plainFields.filter(\n (f) => !!this.getName(f) && !!this.getName(f).length\n );\n\n // do we have any currently un-watched fields?\n if (\n ![...nanoFields, ...plainFields].filter(\n (f) => !this.allFields.includes(f)\n ).length\n )\n return;\n\n // setup the initial store state / refresh on new fields\n this.nanoFields = nanoFields;\n this.plainFields = plainFields;\n this.allFields = [...nanoFields, ...plainFields];\n\n this.storeToFields(this.allFields);\n\n this.validateOnChange();\n this.fieldsToStore(this.allFields, true);\n this.nanoPayloadChange.emit(this._store.state);\n }\n\n private storeToFields(fields: Array<NanoFormEles | PlainFormEles>) {\n fields.forEach((field) => {\n const fieldName = this.getName(field);\n if (\n !fieldName.length ||\n typeof this._store.state[fieldName] === 'undefined'\n )\n return;\n\n if (\n field.tagName.toLowerCase() === transformTag('nano-checkbox') ||\n ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n ) {\n const cbs = this.allFields.filter(\n (f) => this.getName(field) === this.getName(f)\n ) as HTMLNanoCheckboxElement[];\n if (\n cbs[0].type === 'radio' ||\n cbs[0].type === 'segment' ||\n cbs[0].type === 'segment-pill'\n ) {\n // single radio type control\n cbs.forEach((cb) => {\n if (this._store.state[fieldName] === cb.value) cb.checked = true;\n else cb.checked = false;\n });\n } else if (Array.isArray(this._store.state[fieldName])) {\n // multiple checkbox like controls\n cbs.forEach((cb) => {\n if (this._store.state[fieldName]?.includes(cb.value))\n cb.checked = true;\n else cb.checked = false;\n });\n } else {\n // single checkbox like control\n cbs.forEach((cb) => {\n if (this._store.state[fieldName] === cb.value) cb.checked = true;\n else cb.checked = false;\n });\n }\n return;\n }\n\n if (field.tagName.toLowerCase() === transformTag('nano-file-upload')) {\n const ff = field as HTMLNanoFileUploadElement;\n // this can only work if the field is empty rn... a one-time deal\n if (!ff.files?.length) ff.files = this._store.state[fieldName];\n return;\n }\n\n // default\n field.value = this._store.state[fieldName];\n });\n }\n\n private getValidityTarget(\n field: PlainFormEles | NanoFormEles | HTMLNanoCheckboxGroupElement\n ) {\n let validityTarget = field;\n\n if (field.tagName.toLowerCase() === transformTag('nano-checkbox')) {\n // if we have a checkbox-group, set the validation message there\n const cbg = field.closest<HTMLNanoCheckboxGroupElement>(\n transformTag('nano-checkbox-group')\n );\n validityTarget = cbg || field;\n }\n\n return validityTarget;\n }\n\n /** Loops through all `nano-...` fields and extracts their values into our store */\n private fieldsToStore(\n fields: Array<NanoFormEles | PlainFormEles>,\n init = false\n ) {\n fields.forEach((field) => {\n const fieldName = this.getName(field);\n if (!fieldName.length) return;\n\n if (!!this._store.state[fieldName] && this.hasSetStore && init) {\n // a new field is being added\n // but we already have a value for it\n // via a store that has been actively set\n // so let's not overwrite it\n return;\n }\n\n if (\n field.tagName.toLowerCase() === transformTag('nano-checkbox') ||\n ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n ) {\n const cb = field as HTMLNanoCheckboxElement;\n\n if (\n cb.type === 'radio' ||\n cb.type === 'segment' ||\n cb.type === 'segment-pill'\n ) {\n // radio type control - only one can be checked\n if (cb.checked) this._store.state[fieldName] = cb.value;\n } else if (\n this.allFields.filter(\n (f) =>\n this.getName(f) === fieldName &&\n (f.tagName.toLowerCase() === transformTag('nano-checkbox') ||\n (f as HTMLInputElement).type === 'checkbox')\n ).length > 1\n ) {\n // multiple checkbox type control\n const currentArr = Array.isArray(this._store.state[fieldName])\n ? this._store.state[fieldName]\n : [];\n if (cb.checked) {\n // checked\n if (!this._store.state[fieldName]?.includes(cb.value)) {\n this._store.state[fieldName] = [...currentArr, cb.value];\n }\n } else {\n // unchecked\n this._store.state[fieldName] = currentArr.filter(\n (v) => v !== cb.value\n );\n }\n } else {\n // single checkbox - on or off\n if (cb.checked) this._store.state[fieldName] = cb.value;\n else this._store.state[fieldName] = '';\n }\n return;\n }\n\n if (field.tagName.toLowerCase() === transformTag('nano-file-upload')) {\n const ff = field as HTMLNanoFileUploadElement;\n if (!this.fileStateEqual(fieldName, ff))\n this._store.state[fieldName] = ff.files;\n\n return;\n }\n\n // default\n this._store.state[fieldName] = field.value;\n });\n }\n\n /**\n * Tries to ascertain whether the current model\n * value is the same as the `nano-file-upload` value\n * @param fieldName - the key to access from the data store\n * @param field - the nano-file-upload field to assess against\n * @returns true for equal, false for not equal\n */\n private fileStateEqual(\n fieldName: string | number,\n field: HTMLNanoFileUploadElement\n ) {\n return (\n JSON.stringify(this._store.state[fieldName]) ===\n JSON.stringify(field.files) ||\n this._store.state[fieldName] == field.files\n );\n }\n\n /**\n * Checks for user defined validations\n * @param key - current key of the data model to validate\n * @param newVal - the newly set, incoming value to validate\n */\n private async validate(key: string | number, newVal: any) {\n if (!this.validation) return;\n\n const res = this.validation(key as string, newVal, this._store.state);\n\n // no nothing - return\n if (!res) return;\n\n // stencil public methods are async\n // so we must coerce our validation\n // collection loop into a promise\n await Promise.all(\n Object.entries(res).map(async ([msg, validityState]) => {\n return validityState.fields.map(async (fieldName) => {\n // switch on/off validation messages\n const field = this.allFields.find(\n (f) => this.getName(f) === fieldName\n );\n const validityTarget = this.getValidityTarget(field);\n\n if (\n ((validityTarget as NanoFormEles).validityMessage ||\n (validityTarget as PlainFormEles).validationMessage) === msg &&\n validityState.valid\n ) {\n // status is now valid - clear the error\n await this.setFieldError(validityTarget, '');\n } else if (!validityState.valid) {\n // status is invalid. Set the error\n await this.setFieldError(validityTarget, msg);\n }\n });\n })\n );\n }\n\n /** Loops through all store entries and checks custom validation */\n private async validateAllFields() {\n // This forces our loop to `await` and finish sequentially ... silly async stencil methods\n await Object.entries(this._store.state).reduce(\n async (memo, [key, value]) => {\n await memo;\n await this.validate(key, value);\n },\n undefined as any\n );\n }\n\n /**\n * Utility to smooth out setting error messages\n * (it's a different method on `nano-checkbox` 'cos they don't show errors themselves)\n * @param field\n * @param msg\n */\n private async setFieldError(\n field: NanoFormEles | HTMLNanoCheckboxGroupElement | PlainFormEles,\n msg: string\n ) {\n const validityTarget = this.getValidityTarget(field);\n\n if (validityTarget['showError']) {\n await (\n validityTarget as Exclude<NanoFormEles, HTMLNanoCheckboxElement>\n ).showError(msg);\n } else if (validityTarget['setError'])\n await (validityTarget as HTMLNanoCheckboxElement).setError(msg);\n else (validityTarget as PlainFormEles).setCustomValidity(msg);\n }\n\n private submitForm() {\n const nanoSubmit = this.nanoSubmit.emit();\n if (nanoSubmit.defaultPrevented) return;\n this.activeForm.submit();\n }\n\n // Event handlers\n\n /**\n * Fired whenever store values change and potentially checks validity\n * @param key - the key of the store that's just changed\n * @param newVal - the incoming, new value\n */\n private handleStoreChange = async (key: string | number, newVal: any) => {\n const found = this.allFields.find((field) => this.getName(field) === key);\n\n // field update has come programmatically (not from ui),\n // so let's update the underlying ui field\n if (\n found &&\n (found.tagName.toLowerCase() === transformTag('nano-checkbox') ||\n ['radio', 'checkbox'].includes((found as HTMLInputElement).type))\n ) {\n // it's a cb - always change.\n this.storeToFields([found]);\n } else if (\n found &&\n ((found.tagName.toLowerCase() === transformTag('nano-file-upload') &&\n !this.fileStateEqual(key, found as HTMLNanoFileUploadElement)) ||\n (found.tagName.toLowerCase() !== transformTag('nano-file-upload') &&\n found.value !== newVal))\n ) {\n // not a cb. Only change if value is different\n this.storeToFields([found]);\n }\n\n if (this.validateOn === 'dirty' && this.dirty) {\n this.internalValidate = true;\n await this.validateAllFields();\n this._valid = this.activeForm.checkValidity();\n this.internalValidate = false;\n }\n this.nanoPayloadChange.emit(this._store.state);\n };\n\n /**\n * Handles nano field value changes and passes to store\n * @param ev - the incoming change event\n */\n @Listen('nanoChange')\n handleFieldChange(ev: NanoFormEvent) {\n if (!this.nanoFields?.includes(ev.target)) return;\n this._dirty = true;\n this.fieldsToStore([ev.target]);\n }\n\n /**\n * Handles non-nano field value changes and passes to store\n * @param ev - the incoming change event\n */\n @Listen('input')\n @Listen('change')\n handlePlainFieldChange(ev: PlainFormEvent) {\n if (!this.plainFields.includes(ev.target)) return;\n this.fieldsToStore([ev.target]);\n }\n\n /**\n * Handles default field validation events\n * @param ev - the invalid event\n */\n private handleFormInvalid = async (ev: Event & { target: PlainFormEles }) => {\n // if it's a non-nano field, we'll let default html5 validation do it's thing\n if (!this.plainFields.includes(ev.target)) {\n ev.preventDefault();\n }\n\n this._valid = false;\n\n // whenever `checkValidity` is called, this handler is in-turn called.\n // this flag is used to stop infinite loops\n if (this.internalValidate) return;\n\n // a submit must have happened to if 'submitThenDirty' turn on 'dirty' checking now\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n this.submitted = true;\n\n await this.validateAllFields();\n this.internalValidate = true;\n this._valid = this.activeForm.checkValidity();\n this.internalValidate = false;\n\n // kinda insane...but if we're only validating on submit, then if the form is currently\n // in an invalid state, when submitting, it will fire an invalid event and not\n // submit the form. So let's test to make sure it is really invalid, and submit if not\n if (this.validateOn === 'submit') {\n if (this._valid) {\n this.submitForm();\n return;\n }\n }\n\n this.scrollToFirstInvalid(false);\n this.nanoInvalid.emit();\n };\n\n /**\n * stops default form submission, checks if valid, then submits manually\n * @param e - a submit event from the nested form element\n */\n @Listen('submit')\n async handleSubmit(e: Event) {\n e.preventDefault();\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n this.submitted = true;\n await this.validateAllFields();\n\n this.internalValidate = true;\n this._valid = this.activeForm.checkValidity();\n this.internalValidate = false;\n\n if (!this._valid) {\n this.scrollToFirstInvalid(false);\n return;\n }\n this.submitForm();\n }\n\n connectedCallback(): void {\n this.userForm = this.host.querySelector('form');\n this._store = createStore<ValidatorValueStore>({});\n }\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n this.setupFields();\n this.attachSlotObserver();\n this._store.on('set', this.handleStoreChange);\n });\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n this._store.reset();\n\n if (this.activeForm)\n this.activeForm.removeEventListener(\n 'invalid',\n this.handleFormInvalid,\n true\n );\n }\n\n render() {\n return (\n <Host class=\"nano-field-validator\">\n {this.userForm && <slot />}\n {!this.userForm && (\n <form ref={(f) => (this.activeForm = f)}>\n <slot />\n </form>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nano-file-upload.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"nano-file-upload.js","mappings":"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","names":[],"sources":["src/components/file-upload/file-upload.scss?tag=nano-file-upload&encapsulation=scoped","src/components/file-upload/file-upload.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n /**\n * @prop --invalid-msg-color: Default value #{tokens.nano-color(danger, base)};\n * @prop --invalid-msg-font-size: Default value #{tokens.$input-help-font-size};\n\n * @prop --help-msg-color: Default value #{tokens.$input-help-color};\n\n * @prop --label-color: Default value #{tokens.$label-color};\n * @prop --label-color--invalid: Default value #{tokens.$label-color-invalid};\n * @prop --label-font-size: Default value #{tokens.$label-font-size};\n * @prop --label-padding: Default value #{tokens.$input-padding-bottom};\n * @prop --label-color--invalid: Default value #{tokens.$label-color-invalid};\n\n * @prop --drop-bg: Default value #{map.get(tokens.$colors, blue--faded)};\n * @prop --drop-text: Default value #{map.get(tokens.$colors, dimgrey)};\n * @prop --drop-height: Default value 3.5em;\n * @prop --drop-border-tint: Default value #{tokens.nano-color(primary, base, null, true)};\n * @prop --drop-border-width: Default value 2px;\n * @prop --drop-border-radius: Default value 5px;\n * @prop --drop-bg--invalid: Default value #{tokens.$input-background-color--invalid};\n * @prop --drop-border--invalid: Default value #{tokens.nano-color(danger, base, null, true)};\n\n * @prop --btn-bg: Default value #{tokens.nano-color(primary, base)};\n * @prop --btn-text: Default value #{tokens.nano-color(primary, contrast)};\n * @prop --btn-icon-size: Default value var(--nano-btn-icon-size, 1.4em);\n * @prop --btn-padding-top: Default value var(--nano-btn-padding-top, .5em);\n * @prop --btn-padding-bottom: Default value var(--nano-btn-padding-bottom, .5em);\n * @prop --btn-padding-start: Default value var(--nano-btn-padding-start, 1em);\n * @prop --btn-padding-end: Default value var(--nano-btn-padding-end, 1em);\n */\n\n min-block-size: 1rem;\n display: block;\n\n --invalid-msg-color: #{tokens.nano-color(danger, base)};\n --invalid-msg-font-size: #{tokens.$input-help-font-size};\n --help-msg-color: #{tokens.$input-help-color};\n --label-color: #{tokens.$label-color};\n --label-font-size: #{tokens.$label-font-size};\n --label-padding: #{tokens.$input-padding-bottom};\n --label-color--invalid: #{tokens.$label-color-invalid};\n --drop-bg: #{map.get(tokens.$colors, blue--faded)};\n --drop-text: #{darken(map.get(tokens.$colors, dimgrey), 11%)};\n --drop-height: 3.5em;\n --drop-border-tint: #{tokens.nano-color(primary, base, null, true)};\n --drop-border-width: 2px;\n --drop-border-radius: 5px;\n --drop-bg--invalid: #{tokens.$input-background-color--invalid};\n --drop-border--invalid: #{tokens.nano-color(danger, base, null, true)};\n --btn-bg: #{tokens.nano-color(primary, base)};\n --btn-text: #{tokens.nano-color(primary, contrast)};\n --btn-icon-size: var(--nano-btn-icon-size, 1.4em);\n --btn-padding-top: var(--nano-btn-padding-top, 0.5em);\n --btn-padding-bottom: var(--nano-btn-padding-bottom, 0.5em);\n --btn-padding-start: var(--nano-btn-padding-start, 1rem);\n --btn-padding-end: var(--nano-btn-padding-end, 1rem);\n}\n\n:host([disabled]:not([disabled='false'])) {\n opacity: 0.7;\n\n * {\n pointer-events: none !important;\n }\n}\n\n.file-upload {\n $self: &;\n\n /* Common */\n\n &__label {\n font-size: var(--label-font-size);\n padding: 0 0 var(--label-padding);\n margin: 0;\n line-height: 1;\n\n :host([invalid]:not([invalid='false'])) & {\n color: var(--label-color--invalid);\n }\n }\n\n &__input {\n @include mx.visually-hide();\n }\n\n &__error,\n &__help,\n &__more,\n &__label {\n display: block;\n inline-size: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &__more {\n block-size: 1em;\n margin-block: calc(var(--label-padding) / 2) var(--label-padding);\n margin-inline: 3px 0;\n position: relative;\n }\n\n &__error,\n &__help {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n\n .file-upload--invalid & {\n opacity: 1;\n }\n }\n\n &__error {\n color: var(--invalid-msg-color);\n opacity: 0;\n\n .file-upload--invalid & {\n opacity: 1;\n }\n }\n\n &__help {\n font-style: italic;\n opacity: 1;\n color: var(--help-msg-color);\n\n .file-upload--invalid & {\n opacity: 0;\n }\n }\n\n /* Drop area / Multi file upload */\n\n &__drop {\n position: relative;\n inline-size: 100%;\n display: inline-block;\n }\n\n &__drop-area {\n flex-direction: column;\n background-color: var(--drop-bg);\n color: var(--drop-text);\n min-block-size: var(--drop-height);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.9em;\n position: relative;\n transition: background-color 0.15s ease-in-out;\n padding: 0.5rem;\n\n :host([disabled]:not([disabled='false'])) & {\n opacity: 0.7;\n }\n\n .file-upload--invalid & {\n background-color: var(--drop-bg--invalid);\n }\n\n .file-upload--dragging & {\n background-color: #{map.get(tokens.$colors, white)};\n }\n\n &::after {\n content: '';\n position: absolute;\n border-radius: var(--drop-border-radius);\n border-width: var(--drop-border-width);\n border-color: rgb(var(--drop-border-tint) / 50%);\n border-style: dashed;\n inset: 0;\n transition:\n top 0.1s ease-in-out,\n bottom 0.1s ease-in-out,\n left 0.1s ease-in-out,\n right 0.1s ease-in-out;\n\n .file-upload--invalid & {\n border-color: rgb(var(--drop-border--invalid) / 100%);\n }\n\n .file-upload--dragging & {\n inset: 5px;\n }\n }\n\n span {\n color: rgb(var(--drop-border-tint) / 100%);\n text-decoration: underline;\n border-radius: 2px;\n z-index: 1;\n cursor: pointer;\n position: relative;\n\n .file-upload--focus & {\n box-shadow: #{tokens.$control-focus-style};\n }\n }\n }\n\n &__list {\n list-style: none;\n margin: 0;\n padding: 0;\n\n &-wrap {\n position: relative;\n inset-block-start: -4px;\n }\n\n &-item {\n inline-size: 100%;\n margin: 0 0 2px;\n display: flex;\n align-items: center;\n transform: translateZ(0);\n animation: hideListItem 0.3s ease-in-out forwards;\n\n @keyframes hideListItem {\n 0% {\n opacity: 1;\n transform: translateY(0);\n transform: translateZ(0);\n }\n\n 100% {\n opacity: 0;\n transform: translateY(10px);\n transform: translateZ(0);\n }\n }\n\n &--active {\n animation: showListItem 0.3s ease-in-out forwards;\n\n @keyframes showListItem {\n 0% {\n opacity: 0;\n transform: translateY(10px);\n transform: translateZ(0);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n transform: translateZ(0);\n }\n }\n }\n }\n\n .list-title {\n background: var(--nano-color-blue--faded);\n border-radius: 5px;\n padding: 5px;\n margin-inline-end: 2px;\n display: block;\n inline-size: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-size: 0.9em;\n color: var(--help-msg-color);\n }\n\n .list-button {\n background: var(--nano-color-blue--faded);\n border-radius: 5px;\n margin: 2px;\n }\n\n .list-error {\n --color: rgb(var(--drop-border--invalid) / 100%);\n }\n }\n\n /* Button display / Single file upload */\n\n &__button {\n @include tokens.button-base;\n @include tokens.button-standard(\n var(--btn-bg),\n var(--btn-text),\n #{tokens.nano-color(primary, shade)}\n );\n\n --nano-btn-icon-size: var(--btn-icon-size);\n --nano-btn-line-height: var(--btn-icon-size);\n --nano-btn-padding-top: var(--btn-padding-top);\n --nano-btn-padding-bottom: var(--btn-padding-bottom);\n --nano-btn-padding-start: var(--btn-padding-start);\n --nano-btn-padding-end: var(--btn-padding-end);\n\n max-inline-size: 100%;\n font-size: 0.9em;\n\n :host([disabled]:not([disabled='false'])) & {\n opacity: 0.4;\n }\n\n .file-upload--dragging & {\n --nano-btn-border-style: dashed;\n }\n #{$self}__clear-btn {\n margin: 0;\n font-size: inherit;\n padding: 0;\n border: 0;\n outline: none;\n background-color: transparent;\n display: flex;\n align-items: stretch;\n inline-size: auto;\n color: var(--clear-btn-color);\n\n :host(.is-invalid) & {\n color: var(--clear-btn-color--invalid);\n }\n\n .nano-icon {\n margin-inline: 0.4rem 0;\n margin-block: 0;\n }\n }\n #{$self}__btn-content {\n display: flex;\n align-items: center;\n\n span {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-inline-size: 0;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n Host,\n Element,\n ComponentInterface,\n State,\n Event,\n EventEmitter,\n Watch,\n VNode,\n Method,\n Listen,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport {\n FileInputChangeEventDetail,\n FileWithUrl,\n} from './file-upload-interface';\nimport type {\n ControlValidity,\n ControlValidityEventDetail,\n} from '../../types/shared';\n\nlet fileInputIds = 0;\n\nlet getDataTransfer = () => new DataTransfer();\ntry {\n getDataTransfer();\n} catch {\n try {\n getDataTransfer = () => new ClipboardEvent('').clipboardData;\n getDataTransfer();\n } catch {\n getDataTransfer = null;\n }\n}\n\ninterface FileValidation {\n file: File;\n valid: boolean;\n validationMessage?: string;\n location?: string;\n}\n/**\n * A better UI experience for `input type=\"file\"` form controls.\n *\n * - Drag and Drop\n * - Validation options\n * - Preview and manage multiple files\n */\n@Component({\n tag: 'nano-file-upload',\n styleUrl: 'file-upload.scss',\n scoped: true,\n})\nexport class FileUpload implements ComponentInterface {\n private inputEl: HTMLInputElement;\n private publicInputEl: HTMLInputElement;\n private mo!: MutationObserver;\n private fileInputId = `nano-file-upload-${fileInputIds++}`;\n private canChangeFileList = !!getDataTransfer;\n private removeFiles: FileValidation[] = [];\n\n @State() hasHelperSlot: boolean;\n @State() hasLabelSlot: boolean;\n @State() errorMessage: string = '';\n @State() isDragging = false;\n @State() fileList: FileValidation[] = [];\n @Watch('fileList')\n fileListChange() {\n if (this.canChangeFileList) {\n this.publicInputEl.value = '';\n this.inputEl.files = this.arrToFileList(\n this.fileList.map((file) => file.file)\n );\n setTimeout(() => {\n this.nanoChange.emit({ value: this.value, files: this.files });\n }, 20);\n }\n }\n @State() hasFocus: boolean;\n\n @Element() host: HTMLNanoFileUploadElement;\n\n // public props\n\n /** Name of the form control. Submitted with the form as part of a name/value pair. */\n @Prop() name!: string;\n\n /** The accept attribute value is a string that defines the file types the file input should accept.\n * E.g. for a MS Word file: `.doc, .docx,application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document` */\n @Prop() accept?: string;\n\n /** Specifies which camera to use for capture of image or video data. `user` for the user-facing camera and/or microphone.\n * `environment` specifies the the outward-facing camera and/or microphone. If the requested facing mode isn't available,\n * the user agent may fall back to its preferred default mode. */\n @Prop() capture?: 'user' | 'environment';\n\n /** The maximum file size allowed per file (Megabytes) */\n @Prop() maxFileSize: number = 1;\n\n /** The maximum file size allowed per file (bytes). */\n @Prop() maxFiles: number = 1;\n\n /** String to place within a label element. */\n @Prop() label!: string;\n\n /** Placeholder only used within single file uploads. */\n @Prop() placeholder: string = 'Choose a file...';\n\n /** Visually hide the label - but make it accessible. */\n @Prop() hideLabel?: boolean = false;\n\n /** If `true`, the user must select a file to upload before submitting a form. */\n @Prop() required = false;\n\n /** If `true`, the user cannot interact with the select. */\n @Prop({ reflect: true }) disabled = false;\n\n /** If `true`, a clear icon will appear in the input when there is a value.\n * Clicking it clears the input. Only used within single file uploads. */\n @Prop() clearInput = false;\n\n /** Whether to show validation errors underneath input */\n @Prop({ reflect: true }) showInlineError = true;\n\n /** When should the field perform validation */\n @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n 'submit';\n\n /** The form element to associate with this input (its form owner). Must be the id of a form. */\n @Prop() form?: string | null;\n\n @Watch('maxFiles')\n @Watch('maxFileSize')\n @Watch('capture')\n @Watch('accept')\n @Watch('required')\n @Watch('disabled')\n @Watch('fileList')\n protected shouldValidate() {\n if (!this.inputEl) return;\n\n this.validate();\n requestAnimationFrame(() => {\n if (this.validateOn === 'dirty') this.showInlineValidation();\n });\n }\n\n @State() _invalid = false;\n /** This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly */\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n\n /**\n * Current validation message - if any. @readonly\n */\n @Prop()\n get validityMessage() {\n if (!this.inputEl) return '';\n return this.inputEl.validationMessage;\n }\n\n /** A File array that lists every selected file.\n * Has an added `objectURL` property returning a `DOMString`\n * containing an object URL that can be used to reference the contents of the specified source\n * This list has no more than one member unless the multiple attribute is specified */\n @Prop()\n get files(): FileWithUrl[] {\n return this.inputEl\n ? Array.from(this.inputEl.files).map((file: FileWithUrl) => {\n file.objectURL = URL.createObjectURL(file);\n return file;\n })\n : [];\n }\n set files(fs: FileWithUrl[]) {\n this.addNewFiles(this.arrToFileList(fs));\n }\n\n /** A file input's value attribute contains a DOMString that represents the path to the selected file(s).\n * If the user selected multiple files, the value represents the first file in the list of files they selected.\n * You can reset the file-upload control by setting the value to an empty string e.g. `var input.value = ''` */\n @Prop()\n get value() {\n return this.inputEl ? this.inputEl.value : '';\n }\n set value(val: string) {\n if (val === '' && this.inputEl) {\n this.fileList = [];\n this.inputEl.value = '';\n }\n }\n\n // Events\n\n /** Emitted when the value has changed. */\n @Event() nanoChange!: EventEmitter<FileInputChangeEventDetail>;\n\n /** Emited when the checkbox is focused */\n @Event() nanoFocus: EventEmitter;\n\n /** Emited when the checkbox is blurred */\n @Event() nanoBlur: EventEmitter;\n\n /** Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`. */\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // Public methods\n\n /** Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }` */\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n if (validateFirst) {\n this.validate();\n this.showInlineValidation();\n }\n return {\n isValid: !this.invalid,\n errorMessage: this.inputEl.validationMessage,\n };\n }\n\n /** Sets focus on the specified `nano-input`. Use this method instead of the global\n * `input.focus()`. */\n @Method()\n async setFocus() {\n if (this.inputEl) this.inputEl.focus();\n }\n\n /** @returns the native `<input>` element used under the hood */\n @Method()\n getInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement> {\n return Promise.resolve(this.inputEl);\n }\n\n /** Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n * @param message */\n @Method()\n async showError(message: string) {\n if (this.inputEl) {\n this.inputEl.setCustomValidity(message);\n this.validate();\n this.showInlineValidation();\n }\n }\n\n // Listeners\n\n @Listen('click', { target: 'window' })\n globalClickHandler(e: Event) {\n if (!this.hasFocus) return;\n if (e.composedPath().every((node) => node !== this.host)) this.onBlur();\n }\n\n @Listen('keydown', { target: 'window' })\n globalKeydownHandler(e: KeyboardEvent) {\n if (!this.hasFocus || e.key !== 'Tab') return;\n if (e.target !== this.inputEl) this.onBlur();\n }\n\n @Listen('reset', { target: 'body' })\n onReset(e) {\n const form = this.form\n ? document.querySelector('#' + this.form)\n : this.host.closest('form');\n if (!form || e.target !== this.host.closest('form')) return;\n\n this.value = '';\n }\n\n // Private methods\n\n private onClearClick = () => {\n this.value = '';\n };\n\n private onBlur = () => {\n this.hasFocus = false;\n this.validate();\n if (this.validateOn === 'dirty') this.showInlineValidation();\n this.nanoBlur.emit();\n };\n\n private onFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private arrToFileList(files: File[]): FileList {\n const fileList = getDataTransfer();\n for (let i = 0, len = files.length; i < len; i++)\n fileList.items.add(files[i]);\n return fileList.files;\n }\n\n private checkFileSize(size: number): boolean {\n return size / 1000000 <= this.maxFileSize;\n }\n\n private checkFileType(type: string): boolean {\n if (!this.accept) return true;\n return this.accept.match(type) && this.accept.match(type).length > 0;\n }\n\n private validate = () => {\n this.errorMessage = '';\n this.inputEl.setCustomValidity('');\n let error: string;\n\n if (!this.inputEl.validity.valid) {\n error = this.inputEl.validationMessage;\n } else {\n this.fileList.forEach((fileItem) => {\n error = null;\n if (!this.checkFileSize(fileItem.file.size)) {\n error =\n 'Maximum file size exceeded. Max file size is ' +\n this.maxFileSize +\n 'Mb';\n } else if (!this.checkFileType(fileItem.file.type))\n error = `File type is not allowed (${this.accept})`;\n\n fileItem.validationMessage = error;\n fileItem.valid = !error;\n });\n if (this.fileList.length > this.maxFiles)\n error = `Maxinum number of files exceeded (${this.maxFiles})`;\n }\n\n if (error) this.inputEl.setCustomValidity(error);\n };\n\n private showInlineValidation(ev?: Event) {\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n this._invalid = false;\n this.errorMessage = '';\n\n if (!this.inputEl.validity.valid) {\n this.errorMessage = this.inputEl.validationMessage;\n this._invalid = true;\n }\n\n this.nanoValidate.emit({\n isValid: !this._invalid,\n errorMessage: this.inputEl.validationMessage,\n originalEvent: ev,\n });\n }\n\n private slotChangeObserver() {\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true, subtree: true });\n }\n\n private processSlottedContent() {\n // see if we have slot content\n this.hasLabelSlot = !!this.host.querySelectorAll('[slot=\"label\"]');\n this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n }\n\n private addNewFiles(files: FileList) {\n const fileList: FileValidation[] = Array.from(files).map((file) => {\n return {\n file: file,\n location: URL.createObjectURL(file),\n valid: true,\n validationMessage: null,\n };\n });\n\n // if we have a list and we're in a browser that can amend files\n // append files to the list, otherwise replace\n if (this.canChangeFileList && this.maxFiles > 1) {\n const newFiles = fileList.filter(\n (findFile) =>\n !this.fileList.find((file) => file.file.name === findFile.file.name)\n );\n this.fileList = [...this.fileList, ...newFiles];\n } else this.fileList = fileList;\n }\n\n // event handlers & hooks\n\n private onInvalid = (ev: Event) => {\n if (this.showInlineError) ev.preventDefault();\n this.validate();\n this.showInlineValidation(ev);\n };\n\n private onFileChoose = (e: Event) => {\n const files = (e.target as HTMLInputElement).files;\n if (files && files.length)\n this.addNewFiles((e.target as HTMLInputElement).files);\n };\n\n private onFileRemoveFileClick = (e: Event, file: FileValidation) => {\n if (!this.canChangeFileList) return;\n this.removeFiles.push(file);\n\n (e.target as HTMLElement)\n .closest('.file-upload__list-item--active')\n .classList.remove('file-upload__list-item--active');\n };\n\n private onFileRemoveAnim = () => {\n if (!this.canChangeFileList || !this.removeFiles.length) return;\n this.fileList = this.fileList.filter(\n (fileItem) => !this.removeFiles.find((rmFile) => rmFile === fileItem)\n );\n try {\n this.removeFiles.forEach((f) =>\n f.location ? URL.revokeObjectURL(f.location) : ''\n );\n } catch (e) {\n console.error(e);\n }\n this.removeFiles = [];\n };\n\n private onInputChange = () => {\n this.nanoChange.emit({ value: this.value, files: this.files });\n };\n\n private onDragStop = (e: DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n this.isDragging = false;\n };\n\n private onDragStart = (e: DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n this.isDragging = true;\n };\n\n private onDrop = (e: DragEvent) => {\n this.onDragStop(e);\n if (e.dataTransfer.files && e.dataTransfer.files.length)\n this.addNewFiles(e.dataTransfer.files);\n };\n\n // Component lifecycle\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private FileUploadInput = (\n eleType: 'drop' | 'btn',\n listId?: string\n ): VNode[] => {\n const labelId = this.fileInputId + '-lbl';\n const moreId =\n this.showInlineError || this.hasHelperSlot\n ? this.fileInputId + '-more'\n : '';\n\n return [\n <div class={'file-upload__' + eleType + '-wrap'}>\n <label\n class={`file-upload__` + eleType}\n htmlFor={this.fileInputId}\n id={labelId}\n onDrop={(e) => {\n this.onDrop(e);\n this.onDragStop(e);\n }}\n onDragEnd={this.onDragStop}\n onDragLeave={this.onDragStop}\n onDragEnter={this.onDragStart}\n onDragOver={this.onDragStart}\n >\n {(!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (\n <div\n class={`file-upload__label ${\n this.hideLabel ? 'visually-hide' : ''\n }`}\n >\n {!!this.label && !!this.label.length ? this.label : ''}\n {!this.label && this.hasLabelSlot && eleType !== 'drop' && (\n <slot name=\"label\" />\n )}\n </div>\n )}\n {eleType === 'drop' && (\n <div class=\"file-upload__drop-area\">\n <div>{this.hasLabelSlot && <slot name=\"label\" />}</div>\n <div>\n Drag and drop or <span>browse</span>\n </div>\n </div>\n )}\n {eleType === 'btn' && (\n <div\n class={`file-upload__button button--keyline button--icon-start ${\n this.hasFocus ? 'button--focus' : ''\n }`}\n >\n <div class={`file-upload__btn-content`}>\n <nano-icon name=\"regular/cloud-arrow-up\" />\n <span>\n {this.fileList.length\n ? this.fileList[0].file.name\n : this.placeholder}\n </span>\n {!!this.value && this.clearInput && !this.disabled && (\n <button\n type=\"button\"\n class=\"icon file-upload__clear-btn\"\n tabindex=\"-1\"\n onClick={this.onClearClick}\n >\n <nano-icon name=\"light/xmark\"></nano-icon>\n </button>\n )}\n </div>\n </div>\n )}\n <input\n aria-labelledby={labelId + ' ' + moreId + ' ' + listId}\n type=\"file\"\n id={this.fileInputId}\n accept={this.accept}\n class=\"file-upload__input\"\n multiple={this.maxFiles > 1}\n disabled={this.disabled}\n name={this.canChangeFileList ? undefined : this.name}\n form={this.form}\n ref={(input) => {\n if (this.canChangeFileList) {\n this.publicInputEl = input;\n return;\n }\n this.inputEl = input;\n }}\n onChange={this.onFileChoose}\n onFocus={this.onFocus}\n onReset={this.onInputChange}\n />\n </label>\n <input\n name={!this.canChangeFileList ? undefined : this.name}\n form={this.form}\n ref={(input) => {\n if (!this.canChangeFileList) return;\n this.inputEl = input;\n }}\n type=\"file\"\n id={this.fileInputId + '-hidden'}\n tabIndex={-1}\n multiple\n class=\"file-upload__input\"\n disabled={this.disabled}\n required={this.required}\n accept={this.accept}\n onInvalid={this.onInvalid}\n onChange={this.onInputChange}\n />\n </div>,\n this.showInlineError || this.hasHelperSlot ? (\n <div class=\"file-upload__more\" id={moreId}>\n {this.showInlineError && !!this.errorMessage.length ? (\n <div class=\"file-upload__error\">{this.errorMessage}</div>\n ) : (\n ''\n )}\n <div class=\"file-upload__help\">\n <slot name=\"helper\" />\n </div>\n </div>\n ) : (\n ''\n ),\n ];\n };\n\n private button = (): VNode[] => {\n return this.FileUploadInput('btn');\n };\n\n private dropArea = (): VNode[] => {\n const listId = this.fileInputId + '-list';\n return [\n this.FileUploadInput('drop', listId),\n <output class=\"file-upload__list-wrap\" id={listId}>\n {!!this.fileList && this.fileList.length > 0 && (\n <ul class=\"file-upload__list list\">\n {this.fileList.map((file) => {\n return (\n <li\n key={file.file.name}\n class=\"file-upload__list-item file-upload__list-item--active list-item\"\n onAnimationEnd={(_) => this.onFileRemoveAnim()}\n >\n <span class=\"list-title\">{file.file.name}</span>\n {!file.valid && (\n <nano-tooltip\n content={file.validationMessage}\n placement=\"left\"\n >\n <nano-icon-button\n class=\"list-button list-error\"\n iconName=\"light/triangle-exclamation\"\n label=\"File error\"\n />\n </nano-tooltip>\n )}\n {this.canChangeFileList && (\n <nano-icon-button\n class=\"list-button list-button--view\"\n type=\"button\"\n iconName=\"light/eye\"\n label=\"View file\"\n target=\"_blank\"\n href={file.location}\n />\n )}\n {this.canChangeFileList && (\n <nano-icon-button\n onClick={(e) => this.onFileRemoveFileClick(e, file)}\n class=\"list-button list-button--remove\"\n iconName=\"light/xmark\"\n label=\"Remove file\"\n />\n )}\n </li>\n );\n })}\n </ul>\n )}\n </output>,\n ];\n };\n\n render() {\n return (\n <Host class=\"nano-file-upload\">\n <div\n class={{\n 'file-upload': true,\n 'file-upload--dragging': this.isDragging,\n 'file-upload--focus': this.hasFocus,\n 'file-upload--invalid': this._invalid,\n }}\n >\n {this.maxFiles > 1 ? <this.dropArea /> : <this.button />}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nano-global-nav-user-profile.d.ts DELETED Viewed

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-interface NanoGlobalNavUserProfile extends Components.NanoGlobalNavUserProfile, HTMLElement {}
-export const NanoGlobalNavUserProfile: {
-    prototype: NanoGlobalNavUserProfile;
-    new (): NanoGlobalNavUserProfile;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/nano-global-nav-user-profile.js DELETED Viewed

@@ -1,11 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import { G as GlobalNavUserProfile, d as defineCustomElement$1 } from './global-nav-user-profile.js';
-const NanoGlobalNavUserProfile = GlobalNavUserProfile;
-const defineCustomElement = defineCustomElement$1;
-export { NanoGlobalNavUserProfile, defineCustomElement };
-//# sourceMappingURL=nano-global-nav-user-profile.js.map

package/dist/components/nano-global-nav-user-profile.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"file":"nano-global-nav-user-profile.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}