@aotearoan/neon 24.0.0 → 24.1.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.
package/README.md CHANGED
@@ -66,4 +66,4 @@ see [Dark mode](https://aotearoan.github.io/neon/design/theming#dark-mode).
66
66
 
67
67
  1. build the project (`npm build`),
68
68
  2. run `npm pack` to create a tarball of the project
69
- 3. install from the tarball with `npm i -S /$PATH-TO-THIS-PROJECT/arcual-lib-app-neon-21.2.8.tgz`
69
+ 3. install from the tarball with `npm i -S /$PATH-TO-THIS-PROJECT/aotearoan-neon-21.2.8.tgz`
@@ -1,2 +1,2 @@
1
- "use strict";const t=require("vue"),n=require("../../../common/enums/NeonVerticalPosition.cjs.js"),i=require("../../../common/enums/NeonSize.cjs.js"),l=require("../expansion-indicator/NeonExpansionIndicator.vue.cjs.js"),r=require("../icon/NeonIcon.vue.cjs.js"),a=require("../../../common/enums/NeonFunctionalColor.cjs.js"),u=t.defineComponent({name:"NeonExpansionPanel",components:{NeonExpansionIndicator:l,NeonIcon:r},props:{modelValue:{type:Boolean,required:!0},label:{type:String,required:!0},id:{type:String,default:null},icon:{type:String,default:null},position:{type:String,default:n.NeonVerticalPosition.Top},size:{type:String,default:i.NeonSize.Medium},color:{type:String,default:a.NeonFunctionalColor.Neutral},fullWidth:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(e,{emit:o}){return{toggleExpanded:()=>{e.disabled||o("update:modelValue",!e.modelValue)}}}});module.exports=u;
1
+ "use strict";const t=require("../../../common/enums/NeonFunctionalColor.cjs.js"),i=require("../../../common/enums/NeonHorizontalPosition.cjs.js"),l=require("../../../common/enums/NeonSize.cjs.js"),a=require("../../../common/enums/NeonVerticalPosition.cjs.js"),r=require("../expansion-indicator/NeonExpansionIndicator.vue.cjs.js"),u=require("../icon/NeonIcon.vue.cjs.js"),d=require("vue"),s=d.defineComponent({name:"NeonExpansionPanel",components:{NeonExpansionIndicator:r,NeonIcon:u},props:{modelValue:{type:Boolean,required:!0},label:{type:String},id:{type:String,default:null},icon:{type:String,default:null},position:{type:String,default:a.NeonVerticalPosition.Top},indicatorPosition:{type:String,default:i.NeonHorizontalPosition.Right},size:{type:String,default:l.NeonSize.Medium},color:{type:String,default:t.NeonFunctionalColor.Neutral},fullWidth:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(e,{emit:o,slots:n}){return!e.label&&!n.header&&console.error("A label or a header slot most be provided to the NeonExpansionPanel component"),{toggleExpanded:()=>{e.disabled||o("update:modelValue",!e.modelValue)}}}});module.exports=s;
2
2
  //# sourceMappingURL=NeonExpansionPanel.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"NeonExpansionPanel.cjs.js","sources":["../../../../src/components/presentation/expansion-panel/NeonExpansionPanel.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { NeonVerticalPosition } from '@/common/enums/NeonVerticalPosition';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n * <p>Expansion panels are used to show and hide content that may be less important or too large to display on screen\n * all the time. They can also be used to expand lists of items, e.g. <em>Show more</em>. The expansion panel consists\n * of a button which, when clicked, toggles the open/closed state of the expansion panel and a slot for the content to\n * display on expansion.</p>\n */\nexport default defineComponent({\n name: 'NeonExpansionPanel',\n components: {\n NeonExpansionIndicator,\n NeonIcon,\n },\n props: {\n /**\n * A boolean indicating whether the expansion panel is expanded.\n */\n modelValue: { type: Boolean, required: true },\n /**\n * The label of the expansion button\n */\n label: { type: String, required: true },\n /**\n * Provide an id to support aria-controls. The id will be placed on the expansion panel content wrapper and the\n * aria-controls on the header (triggering the expansion).\n */\n id: { type: String, default: null },\n /**\n * An icon to display to the left of the label\n */\n icon: { type: String, default: null },\n /**\n * The position of the expansion button. This can be located above the content to expand or below it.\n */\n position: { type: String as () => NeonVerticalPosition, default: NeonVerticalPosition.Top },\n /**\n * The size of the expansion panel button.\n */\n size: { type: String as () => NeonSize, default: NeonSize.Medium },\n /**\n * The color of the expansion panel button.\n */\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Neutral },\n /**\n * Whether the label and expansion indicator should be flush with the width of the container.\n */\n fullWidth: { type: Boolean, default: false },\n /**\n * The disabled state of the expansion panel\n */\n disabled: { type: Boolean, default: false },\n },\n emits: [\n /**\n * Emitted when the expansion panel button is clicked.\n * @type {boolean} The new open state of the expansion panel.\n */\n 'update:modelValue',\n ],\n setup(props, { emit }) {\n const toggleExpanded = () => {\n if (!props.disabled) {\n emit('update:modelValue', !props.modelValue);\n }\n };\n\n return {\n toggleExpanded,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonExpansionIndicator","NeonIcon","NeonVerticalPosition","NeonSize","NeonFunctionalColor","props","emit"],"mappings":"mUAaAA,EAAeC,kBAAgB,CAC7B,KAAM,qBACN,WAAY,CACV,uBAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAIL,WAAY,CAAE,KAAM,QAAS,SAAU,EAAA,EAIvC,MAAO,CAAE,KAAM,OAAQ,SAAU,EAAA,EAKjC,GAAI,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI7B,KAAM,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI/B,SAAU,CAAE,KAAM,OAAsC,QAASC,EAAAA,qBAAqB,GAAA,EAItF,KAAM,CAAE,KAAM,OAA0B,QAASC,EAAAA,SAAS,MAAA,EAI1D,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,OAAA,EAIjF,UAAW,CAAE,KAAM,QAAS,QAAS,EAAA,EAIrC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE5C,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CAOrB,MAAO,CACL,eAPqB,IAAM,CACtBD,EAAM,UACTC,EAAK,oBAAqB,CAACD,EAAM,UAAU,CAE/C,CAGE,CAEJ,CACF,CAAC"}
1
+ {"version":3,"file":"NeonExpansionPanel.cjs.js","sources":["../../../../src/components/presentation/expansion-panel/NeonExpansionPanel.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonHorizontalPosition } from '@/common/enums/NeonHorizontalPosition';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonVerticalPosition } from '@/common/enums/NeonVerticalPosition';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { defineComponent } from 'vue';\n\n/**\n * <p>Expansion panels are used to show and hide content that may be less important or too large to display on screen\n * all the time. They can also be used to expand lists of items, e.g. <em>Show more</em>. The expansion panel consists\n * of a button which, when clicked, toggles the open/closed state of the expansion panel and a slot for the content to\n * display on expansion.</p>\n */\nexport default defineComponent({\n name: 'NeonExpansionPanel',\n components: {\n NeonExpansionIndicator,\n NeonIcon,\n },\n props: {\n /**\n * A boolean indicating whether the expansion panel is expanded.\n */\n modelValue: { type: Boolean, required: true },\n /**\n * The label of the expansion button\n */\n label: { type: String },\n /**\n * Provide an id to support aria-controls. The id will be placed on the expansion panel content wrapper and the\n * aria-controls on the header (triggering the expansion).\n */\n id: { type: String, default: null },\n /**\n * An icon to display to the left of the label\n */\n icon: { type: String, default: null },\n /**\n * The position of the expansion button. This can be located above the content to expand or below it.\n */\n position: { type: String as () => NeonVerticalPosition, default: NeonVerticalPosition.Top },\n /**\n * The position of the expansion button. This can be located above the content to expand or below it.\n */\n indicatorPosition: { type: String as () => NeonHorizontalPosition, default: NeonHorizontalPosition.Right },\n /**\n * The size of the expansion panel button.\n */\n size: { type: String as () => NeonSize, default: NeonSize.Medium },\n /**\n * The color of the expansion panel button.\n */\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Neutral },\n /**\n * Whether the label and expansion indicator should be flush with the width of the container.\n */\n fullWidth: { type: Boolean, default: false },\n /**\n * The disabled state of the expansion panel\n */\n disabled: { type: Boolean, default: false },\n },\n emits: [\n /**\n * Emitted when the expansion panel button is clicked.\n * @type {boolean} The new open state of the expansion panel.\n */\n 'update:modelValue',\n ],\n setup(props, { emit, slots }) {\n // not sure how to test this, open to idea. Tried seeing if the console.warn was called but doesn't seem to trigger\n if (!props.label && !slots.header) {\n console.error(`A label or a header slot most be provided to the NeonExpansionPanel component`);\n }\n\n const toggleExpanded = () => {\n if (!props.disabled) {\n emit('update:modelValue', !props.modelValue);\n }\n };\n\n return {\n toggleExpanded,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonExpansionIndicator","NeonIcon","NeonVerticalPosition","NeonHorizontalPosition","NeonSize","NeonFunctionalColor","props","emit","slots"],"mappings":"oYAcAA,EAAeC,kBAAgB,CAC7B,KAAM,qBACN,WAAY,CACV,uBAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAIL,WAAY,CAAE,KAAM,QAAS,SAAU,EAAA,EAIvC,MAAO,CAAE,KAAM,MAAA,EAKf,GAAI,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI7B,KAAM,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI/B,SAAU,CAAE,KAAM,OAAsC,QAASC,EAAAA,qBAAqB,GAAA,EAItF,kBAAmB,CAAE,KAAM,OAAwC,QAASC,EAAAA,uBAAuB,KAAA,EAInG,KAAM,CAAE,KAAM,OAA0B,QAASC,EAAAA,SAAS,MAAA,EAI1D,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,OAAA,EAIjF,UAAW,CAAE,KAAM,QAAS,QAAS,EAAA,EAIrC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE5C,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,EAAM,MAAAC,GAAS,CAE5B,MAAI,CAACF,EAAM,OAAS,CAACE,EAAM,QACzB,QAAQ,MAAM,+EAA+E,EASxF,CACL,eAPqB,IAAM,CACtBF,EAAM,UACTC,EAAK,oBAAqB,CAACD,EAAM,UAAU,CAE/C,CAGE,CAEJ,CACF,CAAC"}
@@ -1,14 +1,15 @@
1
- import { defineComponent as t } from "vue";
2
- import { NeonVerticalPosition as n } from "../../../common/enums/NeonVerticalPosition.es.js";
3
- import { NeonSize as l } from "../../../common/enums/NeonSize.es.js";
4
- import i from "../expansion-indicator/NeonExpansionIndicator.vue.es.js";
5
- import a from "../icon/NeonIcon.vue.es.js";
6
- import { NeonFunctionalColor as r } from "../../../common/enums/NeonFunctionalColor.es.js";
7
- const g = t({
1
+ import { NeonFunctionalColor as n } from "../../../common/enums/NeonFunctionalColor.es.js";
2
+ import { NeonHorizontalPosition as l } from "../../../common/enums/NeonHorizontalPosition.es.js";
3
+ import { NeonSize as i } from "../../../common/enums/NeonSize.es.js";
4
+ import { NeonVerticalPosition as a } from "../../../common/enums/NeonVerticalPosition.es.js";
5
+ import r from "../expansion-indicator/NeonExpansionIndicator.vue.es.js";
6
+ import d from "../icon/NeonIcon.vue.es.js";
7
+ import { defineComponent as p } from "vue";
8
+ const S = p({
8
9
  name: "NeonExpansionPanel",
9
10
  components: {
10
- NeonExpansionIndicator: i,
11
- NeonIcon: a
11
+ NeonExpansionIndicator: r,
12
+ NeonIcon: d
12
13
  },
13
14
  props: {
14
15
  /**
@@ -18,7 +19,7 @@ const g = t({
18
19
  /**
19
20
  * The label of the expansion button
20
21
  */
21
- label: { type: String, required: !0 },
22
+ label: { type: String },
22
23
  /**
23
24
  * Provide an id to support aria-controls. The id will be placed on the expansion panel content wrapper and the
24
25
  * aria-controls on the header (triggering the expansion).
@@ -31,15 +32,19 @@ const g = t({
31
32
  /**
32
33
  * The position of the expansion button. This can be located above the content to expand or below it.
33
34
  */
34
- position: { type: String, default: n.Top },
35
+ position: { type: String, default: a.Top },
36
+ /**
37
+ * The position of the expansion button. This can be located above the content to expand or below it.
38
+ */
39
+ indicatorPosition: { type: String, default: l.Right },
35
40
  /**
36
41
  * The size of the expansion panel button.
37
42
  */
38
- size: { type: String, default: l.Medium },
43
+ size: { type: String, default: i.Medium },
39
44
  /**
40
45
  * The color of the expansion panel button.
41
46
  */
42
- color: { type: String, default: r.Neutral },
47
+ color: { type: String, default: n.Neutral },
43
48
  /**
44
49
  * Whether the label and expansion indicator should be flush with the width of the container.
45
50
  */
@@ -56,8 +61,8 @@ const g = t({
56
61
  */
57
62
  "update:modelValue"
58
63
  ],
59
- setup(e, { emit: o }) {
60
- return {
64
+ setup(e, { emit: o, slots: t }) {
65
+ return !e.label && !t.header && console.error("A label or a header slot most be provided to the NeonExpansionPanel component"), {
61
66
  toggleExpanded: () => {
62
67
  e.disabled || o("update:modelValue", !e.modelValue);
63
68
  }
@@ -65,6 +70,6 @@ const g = t({
65
70
  }
66
71
  });
67
72
  export {
68
- g as default
73
+ S as default
69
74
  };
70
75
  //# sourceMappingURL=NeonExpansionPanel.es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"NeonExpansionPanel.es.js","sources":["../../../../src/components/presentation/expansion-panel/NeonExpansionPanel.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { NeonVerticalPosition } from '@/common/enums/NeonVerticalPosition';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n * <p>Expansion panels are used to show and hide content that may be less important or too large to display on screen\n * all the time. They can also be used to expand lists of items, e.g. <em>Show more</em>. The expansion panel consists\n * of a button which, when clicked, toggles the open/closed state of the expansion panel and a slot for the content to\n * display on expansion.</p>\n */\nexport default defineComponent({\n name: 'NeonExpansionPanel',\n components: {\n NeonExpansionIndicator,\n NeonIcon,\n },\n props: {\n /**\n * A boolean indicating whether the expansion panel is expanded.\n */\n modelValue: { type: Boolean, required: true },\n /**\n * The label of the expansion button\n */\n label: { type: String, required: true },\n /**\n * Provide an id to support aria-controls. The id will be placed on the expansion panel content wrapper and the\n * aria-controls on the header (triggering the expansion).\n */\n id: { type: String, default: null },\n /**\n * An icon to display to the left of the label\n */\n icon: { type: String, default: null },\n /**\n * The position of the expansion button. This can be located above the content to expand or below it.\n */\n position: { type: String as () => NeonVerticalPosition, default: NeonVerticalPosition.Top },\n /**\n * The size of the expansion panel button.\n */\n size: { type: String as () => NeonSize, default: NeonSize.Medium },\n /**\n * The color of the expansion panel button.\n */\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Neutral },\n /**\n * Whether the label and expansion indicator should be flush with the width of the container.\n */\n fullWidth: { type: Boolean, default: false },\n /**\n * The disabled state of the expansion panel\n */\n disabled: { type: Boolean, default: false },\n },\n emits: [\n /**\n * Emitted when the expansion panel button is clicked.\n * @type {boolean} The new open state of the expansion panel.\n */\n 'update:modelValue',\n ],\n setup(props, { emit }) {\n const toggleExpanded = () => {\n if (!props.disabled) {\n emit('update:modelValue', !props.modelValue);\n }\n };\n\n return {\n toggleExpanded,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonExpansionIndicator","NeonIcon","NeonVerticalPosition","NeonSize","NeonFunctionalColor","props","emit"],"mappings":";;;;;;AAaA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,wBAAAC;AAAA,IACA,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,YAAY,EAAE,MAAM,SAAS,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIvC,OAAO,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjC,IAAI,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI7B,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI/B,UAAU,EAAE,MAAM,QAAsC,SAASC,EAAqB,IAAA;AAAA;AAAA;AAAA;AAAA,IAItF,MAAM,EAAE,MAAM,QAA0B,SAASC,EAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAI1D,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,QAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,WAAW,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIrC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE5C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AAOrB,WAAO;AAAA,MACL,gBAPqB,MAAM;AAC3B,QAAKD,EAAM,YACTC,EAAK,qBAAqB,CAACD,EAAM,UAAU;AAAA,MAE/C;AAAA,IAGE;AAAA,EAEJ;AACF,CAAC;"}
1
+ {"version":3,"file":"NeonExpansionPanel.es.js","sources":["../../../../src/components/presentation/expansion-panel/NeonExpansionPanel.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonHorizontalPosition } from '@/common/enums/NeonHorizontalPosition';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonVerticalPosition } from '@/common/enums/NeonVerticalPosition';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { defineComponent } from 'vue';\n\n/**\n * <p>Expansion panels are used to show and hide content that may be less important or too large to display on screen\n * all the time. They can also be used to expand lists of items, e.g. <em>Show more</em>. The expansion panel consists\n * of a button which, when clicked, toggles the open/closed state of the expansion panel and a slot for the content to\n * display on expansion.</p>\n */\nexport default defineComponent({\n name: 'NeonExpansionPanel',\n components: {\n NeonExpansionIndicator,\n NeonIcon,\n },\n props: {\n /**\n * A boolean indicating whether the expansion panel is expanded.\n */\n modelValue: { type: Boolean, required: true },\n /**\n * The label of the expansion button\n */\n label: { type: String },\n /**\n * Provide an id to support aria-controls. The id will be placed on the expansion panel content wrapper and the\n * aria-controls on the header (triggering the expansion).\n */\n id: { type: String, default: null },\n /**\n * An icon to display to the left of the label\n */\n icon: { type: String, default: null },\n /**\n * The position of the expansion button. This can be located above the content to expand or below it.\n */\n position: { type: String as () => NeonVerticalPosition, default: NeonVerticalPosition.Top },\n /**\n * The position of the expansion button. This can be located above the content to expand or below it.\n */\n indicatorPosition: { type: String as () => NeonHorizontalPosition, default: NeonHorizontalPosition.Right },\n /**\n * The size of the expansion panel button.\n */\n size: { type: String as () => NeonSize, default: NeonSize.Medium },\n /**\n * The color of the expansion panel button.\n */\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Neutral },\n /**\n * Whether the label and expansion indicator should be flush with the width of the container.\n */\n fullWidth: { type: Boolean, default: false },\n /**\n * The disabled state of the expansion panel\n */\n disabled: { type: Boolean, default: false },\n },\n emits: [\n /**\n * Emitted when the expansion panel button is clicked.\n * @type {boolean} The new open state of the expansion panel.\n */\n 'update:modelValue',\n ],\n setup(props, { emit, slots }) {\n // not sure how to test this, open to idea. Tried seeing if the console.warn was called but doesn't seem to trigger\n if (!props.label && !slots.header) {\n console.error(`A label or a header slot most be provided to the NeonExpansionPanel component`);\n }\n\n const toggleExpanded = () => {\n if (!props.disabled) {\n emit('update:modelValue', !props.modelValue);\n }\n };\n\n return {\n toggleExpanded,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonExpansionIndicator","NeonIcon","NeonVerticalPosition","NeonHorizontalPosition","NeonSize","NeonFunctionalColor","props","emit","slots"],"mappings":";;;;;;;AAcA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,wBAAAC;AAAA,IACA,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,YAAY,EAAE,MAAM,SAAS,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIvC,OAAO,EAAE,MAAM,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKf,IAAI,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI7B,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI/B,UAAU,EAAE,MAAM,QAAsC,SAASC,EAAqB,IAAA;AAAA;AAAA;AAAA;AAAA,IAItF,mBAAmB,EAAE,MAAM,QAAwC,SAASC,EAAuB,MAAA;AAAA;AAAA;AAAA;AAAA,IAInG,MAAM,EAAE,MAAM,QAA0B,SAASC,EAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAI1D,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,QAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,WAAW,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIrC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE5C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,GAAM,OAAAC,KAAS;AAE5B,WAAI,CAACF,EAAM,SAAS,CAACE,EAAM,UACzB,QAAQ,MAAM,+EAA+E,GASxF;AAAA,MACL,gBAPqB,MAAM;AAC3B,QAAKF,EAAM,YACTC,EAAK,qBAAqB,CAACD,EAAM,UAAU;AAAA,MAE/C;AAAA,IAGE;AAAA,EAEJ;AACF,CAAC;"}
@@ -1,2 +1,2 @@
1
- "use strict";const d=require("./NeonExpansionPanel.cjs.js"),n=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),p=["aria-disabled","aria-expanded"],r=["aria-controls"],t={class:"neon-expansion-panel__label"},u=["id"];function c(e,o,b,g,E,v){const l=n.resolveComponent("neon-icon"),i=n.resolveComponent("neon-expansion-indicator");return n.openBlock(),n.createElementBlock("div",{"aria-disabled":e.disabled,"aria-expanded":e.modelValue,class:n.normalizeClass([[{"neon-expansion-panel--expanded":e.modelValue,"neon-expansion-panel--full-width":e.fullWidth,"neon-expansion-panel--disabled":e.disabled},`neon-expansion-panel--${e.position}`,`neon-expansion-panel--${e.size}`,`neon-expansion-panel--${e.color}`],"neon-expansion-panel"])},[n.createElementVNode("div",{"aria-controls":e.id,class:"neon-expansion-panel__header",tabindex:"-1",onClick:o[2]||(o[2]=(...a)=>e.toggleExpanded&&e.toggleExpanded(...a))},[n.createElementVNode("div",{class:"neon-expansion-panel__label-container neon-expansion-panel__label-container--outline-text",tabindex:"0",onKeydown:[o[0]||(o[0]=n.withKeys((...a)=>e.toggleExpanded&&e.toggleExpanded(...a),["enter"])),o[1]||(o[1]=n.withKeys(n.withModifiers((...a)=>e.toggleExpanded&&e.toggleExpanded(...a),["prevent"]),["space"]))]},[e.icon?(n.openBlock(),n.createBlock(l,{key:0,color:e.color,disabled:e.disabled,name:e.icon},null,8,["color","disabled","name"])):n.createCommentVNode("",!0),n.createElementVNode("span",t,n.toDisplayString(e.label),1)],32),n.createVNode(i,{color:e.color,disabled:e.disabled,expanded:e.modelValue},null,8,["color","disabled","expanded"])],8,r),n.withDirectives(n.createElementVNode("div",{id:e.id,class:"neon-expansion-panel__content"},[n.renderSlot(e.$slots,"default")],8,u),[[n.vShow,e.modelValue]])],10,p)}const m=s(d,[["render",c]]);module.exports=m;
1
+ "use strict";const d=require("./NeonExpansionPanel.cjs.js"),n=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["aria-disabled","aria-expanded"],p=["aria-controls"],t={class:"neon-expansion-panel__label"},u=["id"];function m(e,o,b,g,E,V){const l=n.resolveComponent("neon-icon"),i=n.resolveComponent("neon-expansion-indicator");return n.openBlock(),n.createElementBlock("div",{"aria-disabled":e.disabled,"aria-expanded":e.modelValue,class:n.normalizeClass([[{"neon-expansion-panel--expanded":e.modelValue,"neon-expansion-panel--full-width":e.fullWidth,"neon-expansion-panel--disabled":e.disabled},`neon-expansion-panel--${e.position}`,`neon-expansion-panel--${e.size}`,`neon-expansion-panel--${e.color}`],"neon-expansion-panel"])},[n.createElementVNode("div",{"aria-controls":e.id,class:n.normalizeClass([[`neon-expansion-panel__header--${e.indicatorPosition}`],"neon-expansion-panel__header"]),tabindex:"-1",onClick:o[2]||(o[2]=(...a)=>e.toggleExpanded&&e.toggleExpanded(...a))},[n.createElementVNode("div",{class:"neon-expansion-panel__label-container neon-expansion-panel__label-container--outline-text",tabindex:"0",onKeydown:[o[0]||(o[0]=n.withKeys((...a)=>e.toggleExpanded&&e.toggleExpanded(...a),["enter"])),o[1]||(o[1]=n.withKeys(n.withModifiers((...a)=>e.toggleExpanded&&e.toggleExpanded(...a),["prevent"]),["space"]))]},[n.renderSlot(e.$slots,"header",{expanded:e.modelValue},()=>[e.icon?(n.openBlock(),n.createBlock(l,{key:0,color:e.color,disabled:e.disabled,name:e.icon},null,8,["color","disabled","name"])):n.createCommentVNode("",!0),n.createElementVNode("span",t,n.toDisplayString(e.label),1)])],32),n.createVNode(i,{color:e.color,disabled:e.disabled,expanded:e.modelValue},null,8,["color","disabled","expanded"])],10,p),n.withDirectives(n.createElementVNode("div",{id:e.id,class:"neon-expansion-panel__content"},[n.renderSlot(e.$slots,"default")],8,u),[[n.vShow,e.modelValue]])],10,r)}const c=s(d,[["render",m]]);module.exports=c;
2
2
  //# sourceMappingURL=NeonExpansionPanel.vue.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"NeonExpansionPanel.vue.cjs.js","sources":["../../../../src/components/presentation/expansion-panel/NeonExpansionPanel.vue"],"sourcesContent":["<template>\n <div\n :aria-disabled=\"disabled\"\n :aria-expanded=\"modelValue\"\n :class=\"[\n {\n 'neon-expansion-panel--expanded': modelValue,\n 'neon-expansion-panel--full-width': fullWidth,\n 'neon-expansion-panel--disabled': disabled,\n },\n `neon-expansion-panel--${position}`,\n `neon-expansion-panel--${size}`,\n `neon-expansion-panel--${color}`,\n ]\"\n class=\"neon-expansion-panel\"\n >\n <div :aria-controls=\"id\" class=\"neon-expansion-panel__header\" tabindex=\"-1\" @click=\"toggleExpanded\">\n <div\n class=\"neon-expansion-panel__label-container neon-expansion-panel__label-container--outline-text\"\n tabindex=\"0\"\n @keydown.enter=\"toggleExpanded\"\n @keydown.space.prevent=\"toggleExpanded\"\n >\n <neon-icon v-if=\"icon\" :color=\"color\" :disabled=\"disabled\" :name=\"icon\" />\n <span class=\"neon-expansion-panel__label\">{{ label }}</span>\n </div>\n <neon-expansion-indicator :color=\"color\" :disabled=\"disabled\" :expanded=\"modelValue\" />\n </div>\n <div v-show=\"modelValue\" :id=\"id\" class=\"neon-expansion-panel__content\">\n <!-- @slot The expansion panel contents -->\n <slot></slot>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonExpansionPanel.ts\" />\n"],"names":["_hoisted_3","_createElementBlock","_ctx","_normalizeClass","_createElementVNode","args","_createBlock","_component_neon_icon","_toDisplayString","_createVNode","_component_neon_expansion_indicator","_renderSlot"],"mappings":"qMAwBcA,EAAA,CAAA,MAAM,6BAA6B,iJAvB/CC,EAAAA,mBA+BM,MAAA,CA9BH,gBAAeC,EAAA,SACf,gBAAeA,EAAA,WACf,MAAKC,EAAAA,eAAA,CAAA,mCAAsDD,EAAA,8CAAwDA,EAAA,2CAAqDA,EAAA,mCAAkDA,EAAA,QAAQ,4BAAmCA,EAAA,IAAI,4BAAmCA,EAAA,KAAK,IAU5S,sBAAsB,CAAA,IAE5BE,EAAAA,mBAWM,MAAA,CAXA,gBAAeF,EAAA,GAAI,MAAM,+BAA+B,SAAS,KAAM,4BAAOA,EAAA,gBAAAA,EAAA,eAAA,GAAAG,CAAA,KAClFD,EAAAA,mBAQM,MAAA,CAPJ,MAAM,4FACN,SAAS,IACR,UAAO,gCAAQF,EAAA,gBAAAA,EAAA,eAAA,GAAAG,CAAA,EAAc,CAAA,OAAA,CAAA,kDACNH,EAAA,gBAAAA,EAAA,eAAA,GAAAG,CAAA,EAAc,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,MAErBH,EAAA,oBAAjBI,EAAAA,YAA0EC,EAAA,OAAlD,MAAOL,EAAA,MAAQ,SAAUA,EAAA,SAAW,KAAMA,EAAA,uEAClEE,EAAAA,mBAA4D,OAA5DJ,EAA4DQ,EAAAA,gBAAfN,EAAA,KAAK,EAAA,CAAA,OAEpDO,EAAAA,YAAuFC,EAAA,CAA5D,MAAOR,EAAA,MAAQ,SAAUA,EAAA,SAAW,SAAUA,EAAA,2EAE3EE,EAAAA,mBAGM,MAAA,CAHoB,GAAIF,EAAA,GAAI,MAAM,kCAEtCS,aAAaT,EAAA,OAAA,SAAA,kBAFFA,EAAA,UAAU"}
1
+ {"version":3,"file":"NeonExpansionPanel.vue.cjs.js","sources":["../../../../src/components/presentation/expansion-panel/NeonExpansionPanel.vue"],"sourcesContent":["<template>\n <div\n :aria-disabled=\"disabled\"\n :aria-expanded=\"modelValue\"\n :class=\"[\n {\n 'neon-expansion-panel--expanded': modelValue,\n 'neon-expansion-panel--full-width': fullWidth,\n 'neon-expansion-panel--disabled': disabled,\n },\n `neon-expansion-panel--${position}`,\n `neon-expansion-panel--${size}`,\n `neon-expansion-panel--${color}`,\n ]\"\n class=\"neon-expansion-panel\"\n >\n <div\n :aria-controls=\"id\"\n :class=\"[`neon-expansion-panel__header--${indicatorPosition}`]\"\n class=\"neon-expansion-panel__header\"\n tabindex=\"-1\"\n @click=\"toggleExpanded\"\n >\n <div\n class=\"neon-expansion-panel__label-container neon-expansion-panel__label-container--outline-text\"\n tabindex=\"0\"\n @keydown.enter=\"toggleExpanded\"\n @keydown.space.prevent=\"toggleExpanded\"\n >\n <slot :expanded=\"modelValue\" name=\"header\">\n <neon-icon v-if=\"icon\" :color=\"color\" :disabled=\"disabled\" :name=\"icon\" />\n <span class=\"neon-expansion-panel__label\">{{ label }}</span>\n </slot>\n </div>\n <neon-expansion-indicator :color=\"color\" :disabled=\"disabled\" :expanded=\"modelValue\" />\n </div>\n <div v-show=\"modelValue\" :id=\"id\" class=\"neon-expansion-panel__content\">\n <!-- @slot The expansion panel contents -->\n <slot></slot>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonExpansionPanel.ts\" />\n"],"names":["_hoisted_3","_createElementBlock","_ctx","_normalizeClass","_createElementVNode","args","_renderSlot","_createBlock","_component_neon_icon","_toDisplayString","_createVNode","_component_neon_expansion_indicator"],"mappings":"qMA+BgBA,EAAA,CAAA,MAAM,6BAA6B,iJA9BjDC,EAAAA,mBAuCM,MAAA,CAtCH,gBAAeC,EAAA,SACf,gBAAeA,EAAA,WACf,MAAKC,EAAAA,eAAA,CAAA,mCAAsDD,EAAA,8CAAwDA,EAAA,2CAAqDA,EAAA,mCAAkDA,EAAA,QAAQ,4BAAmCA,EAAA,IAAI,4BAAmCA,EAAA,KAAK,IAU5S,sBAAsB,CAAA,IAE5BE,EAAAA,mBAmBM,MAAA,CAlBH,gBAAeF,EAAA,GACf,MAAKC,EAAAA,eAAA,CAAA,CAAA,iCAAoCD,EAAA,iBAAiB,EAAA,EACrD,8BAA8B,CAAA,EACpC,SAAS,KACR,4BAAOA,EAAA,gBAAAA,EAAA,eAAA,GAAAG,CAAA,KAERD,EAAAA,mBAUM,MAAA,CATJ,MAAM,4FACN,SAAS,IACR,UAAO,gCAAQF,EAAA,gBAAAA,EAAA,eAAA,GAAAG,CAAA,EAAc,CAAA,OAAA,CAAA,kDACNH,EAAA,gBAAAA,EAAA,eAAA,GAAAG,CAAA,EAAc,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,MAEtCC,aAGOJ,EAAA,OAAA,SAAA,CAHA,SAAUA,EAAA,UAAU,EAA3B,IAGO,CAFYA,EAAA,oBAAjBK,EAAAA,YAA0EC,EAAA,OAAlD,MAAON,EAAA,MAAQ,SAAUA,EAAA,SAAW,KAAMA,EAAA,uEAClEE,EAAAA,mBAA4D,OAA5DJ,EAA4DS,EAAAA,gBAAfP,EAAA,KAAK,EAAA,CAAA,SAGtDQ,EAAAA,YAAuFC,EAAA,CAA5D,MAAOT,EAAA,MAAQ,SAAUA,EAAA,SAAW,SAAUA,EAAA,4EAE3EE,EAAAA,mBAGM,MAAA,CAHoB,GAAIF,EAAA,GAAI,MAAM,kCAEtCI,aAAaJ,EAAA,OAAA,SAAA,kBAFFA,EAAA,UAAU"}
@@ -1,13 +1,13 @@
1
- import r from "./NeonExpansionPanel.es.js";
2
- import { resolveComponent as l, openBlock as i, createElementBlock as t, normalizeClass as m, createElementVNode as a, withKeys as d, withModifiers as b, createBlock as u, createCommentVNode as g, toDisplayString as c, createVNode as f, withDirectives as E, renderSlot as v, vShow as $ } from "vue";
3
- import V from "../../../_virtual/_plugin-vue_export-helper.es.js";
4
- const h = ["aria-disabled", "aria-expanded"], w = ["aria-controls"], x = { class: "neon-expansion-panel__label" }, k = ["id"];
1
+ import m from "./NeonExpansionPanel.es.js";
2
+ import { resolveComponent as l, openBlock as d, createElementBlock as b, normalizeClass as i, createElementVNode as a, withKeys as s, withModifiers as u, renderSlot as p, createBlock as g, createCommentVNode as f, toDisplayString as c, createVNode as $, withDirectives as E, vShow as h } from "vue";
3
+ import v from "../../../_virtual/_plugin-vue_export-helper.es.js";
4
+ const V = ["aria-disabled", "aria-expanded"], w = ["aria-controls"], k = { class: "neon-expansion-panel__label" }, x = ["id"];
5
5
  function y(e, n, C, N, B, S) {
6
- const s = l("neon-icon"), p = l("neon-expansion-indicator");
7
- return i(), t("div", {
6
+ const r = l("neon-icon"), t = l("neon-expansion-indicator");
7
+ return d(), b("div", {
8
8
  "aria-disabled": e.disabled,
9
9
  "aria-expanded": e.modelValue,
10
- class: m([[
10
+ class: i([[
11
11
  {
12
12
  "neon-expansion-panel--expanded": e.modelValue,
13
13
  "neon-expansion-panel--full-width": e.fullWidth,
@@ -20,7 +20,7 @@ function y(e, n, C, N, B, S) {
20
20
  }, [
21
21
  a("div", {
22
22
  "aria-controls": e.id,
23
- class: "neon-expansion-panel__header",
23
+ class: i([[`neon-expansion-panel__header--${e.indicatorPosition}`], "neon-expansion-panel__header"]),
24
24
  tabindex: "-1",
25
25
  onClick: n[2] || (n[2] = (...o) => e.toggleExpanded && e.toggleExpanded(...o))
26
26
  }, [
@@ -28,36 +28,38 @@ function y(e, n, C, N, B, S) {
28
28
  class: "neon-expansion-panel__label-container neon-expansion-panel__label-container--outline-text",
29
29
  tabindex: "0",
30
30
  onKeydown: [
31
- n[0] || (n[0] = d((...o) => e.toggleExpanded && e.toggleExpanded(...o), ["enter"])),
32
- n[1] || (n[1] = d(b((...o) => e.toggleExpanded && e.toggleExpanded(...o), ["prevent"]), ["space"]))
31
+ n[0] || (n[0] = s((...o) => e.toggleExpanded && e.toggleExpanded(...o), ["enter"])),
32
+ n[1] || (n[1] = s(u((...o) => e.toggleExpanded && e.toggleExpanded(...o), ["prevent"]), ["space"]))
33
33
  ]
34
34
  }, [
35
- e.icon ? (i(), u(s, {
36
- key: 0,
37
- color: e.color,
38
- disabled: e.disabled,
39
- name: e.icon
40
- }, null, 8, ["color", "disabled", "name"])) : g("", !0),
41
- a("span", x, c(e.label), 1)
35
+ p(e.$slots, "header", { expanded: e.modelValue }, () => [
36
+ e.icon ? (d(), g(r, {
37
+ key: 0,
38
+ color: e.color,
39
+ disabled: e.disabled,
40
+ name: e.icon
41
+ }, null, 8, ["color", "disabled", "name"])) : f("", !0),
42
+ a("span", k, c(e.label), 1)
43
+ ])
42
44
  ], 32),
43
- f(p, {
45
+ $(t, {
44
46
  color: e.color,
45
47
  disabled: e.disabled,
46
48
  expanded: e.modelValue
47
49
  }, null, 8, ["color", "disabled", "expanded"])
48
- ], 8, w),
50
+ ], 10, w),
49
51
  E(a("div", {
50
52
  id: e.id,
51
53
  class: "neon-expansion-panel__content"
52
54
  }, [
53
- v(e.$slots, "default")
54
- ], 8, k), [
55
- [$, e.modelValue]
55
+ p(e.$slots, "default")
56
+ ], 8, x), [
57
+ [h, e.modelValue]
56
58
  ])
57
- ], 10, h);
59
+ ], 10, V);
58
60
  }
59
- const M = /* @__PURE__ */ V(r, [["render", y]]);
61
+ const P = /* @__PURE__ */ v(m, [["render", y]]);
60
62
  export {
61
- M as default
63
+ P as default
62
64
  };
63
65
  //# sourceMappingURL=NeonExpansionPanel.vue.es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"NeonExpansionPanel.vue.es.js","sources":["../../../../src/components/presentation/expansion-panel/NeonExpansionPanel.vue"],"sourcesContent":["<template>\n <div\n :aria-disabled=\"disabled\"\n :aria-expanded=\"modelValue\"\n :class=\"[\n {\n 'neon-expansion-panel--expanded': modelValue,\n 'neon-expansion-panel--full-width': fullWidth,\n 'neon-expansion-panel--disabled': disabled,\n },\n `neon-expansion-panel--${position}`,\n `neon-expansion-panel--${size}`,\n `neon-expansion-panel--${color}`,\n ]\"\n class=\"neon-expansion-panel\"\n >\n <div :aria-controls=\"id\" class=\"neon-expansion-panel__header\" tabindex=\"-1\" @click=\"toggleExpanded\">\n <div\n class=\"neon-expansion-panel__label-container neon-expansion-panel__label-container--outline-text\"\n tabindex=\"0\"\n @keydown.enter=\"toggleExpanded\"\n @keydown.space.prevent=\"toggleExpanded\"\n >\n <neon-icon v-if=\"icon\" :color=\"color\" :disabled=\"disabled\" :name=\"icon\" />\n <span class=\"neon-expansion-panel__label\">{{ label }}</span>\n </div>\n <neon-expansion-indicator :color=\"color\" :disabled=\"disabled\" :expanded=\"modelValue\" />\n </div>\n <div v-show=\"modelValue\" :id=\"id\" class=\"neon-expansion-panel__content\">\n <!-- @slot The expansion panel contents -->\n <slot></slot>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonExpansionPanel.ts\" />\n"],"names":["_hoisted_3","_createElementBlock","_ctx","_normalizeClass","_createElementVNode","args","_createBlock","_component_neon_icon","_toDisplayString","_createVNode","_component_neon_expansion_indicator","_renderSlot"],"mappings":";;;qEAwBcA,IAAA,EAAA,OAAM,8BAA6B;;;cAvB/CC,EA+BM,OAAA;AAAA,IA9BH,iBAAeC,EAAA;AAAA,IACf,iBAAeA,EAAA;AAAA,IACf,OAAKC,EAAA,CAAA;AAAA;0CAAsDD,EAAA;AAAA,4CAAwDA,EAAA;AAAA,0CAAqDA,EAAA;AAAA;+BAAkDA,EAAA,QAAQ;AAAA,+BAAmCA,EAAA,IAAI;AAAA,+BAAmCA,EAAA,KAAK;AAAA,OAU5S,sBAAsB,CAAA;AAAA;IAE5BE,EAWM,OAAA;AAAA,MAXA,iBAAeF,EAAA;AAAA,MAAI,OAAM;AAAA,MAA+B,UAAS;AAAA,MAAM,mCAAOA,EAAA,kBAAAA,EAAA,eAAA,GAAAG,CAAA;AAAA;MAClFD,EAQM,OAAA;AAAA,QAPJ,OAAM;AAAA,QACN,UAAS;AAAA,QACR,WAAO;AAAA,sCAAQF,EAAA,kBAAAA,EAAA,eAAA,GAAAG,CAAA,GAAc,CAAA,OAAA,CAAA;AAAA,wCACNH,EAAA,kBAAAA,EAAA,eAAA,GAAAG,CAAA,GAAc,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;;QAErBH,EAAA,aAAjBI,EAA0EC,GAAA;AAAA;UAAlD,OAAOL,EAAA;AAAA,UAAQ,UAAUA,EAAA;AAAA,UAAW,MAAMA,EAAA;AAAA;QAClEE,EAA4D,QAA5DJ,GAA4DQ,EAAfN,EAAA,KAAK,GAAA,CAAA;AAAA;MAEpDO,EAAuFC,GAAA;AAAA,QAA5D,OAAOR,EAAA;AAAA,QAAQ,UAAUA,EAAA;AAAA,QAAW,UAAUA,EAAA;AAAA;;MAE3EE,EAGM,OAAA;AAAA,MAHoB,IAAIF,EAAA;AAAA,MAAI,OAAM;AAAA;MAEtCS,EAAaT,EAAA,QAAA,SAAA;AAAA;UAFFA,EAAA,UAAU;AAAA;;;;"}
1
+ {"version":3,"file":"NeonExpansionPanel.vue.es.js","sources":["../../../../src/components/presentation/expansion-panel/NeonExpansionPanel.vue"],"sourcesContent":["<template>\n <div\n :aria-disabled=\"disabled\"\n :aria-expanded=\"modelValue\"\n :class=\"[\n {\n 'neon-expansion-panel--expanded': modelValue,\n 'neon-expansion-panel--full-width': fullWidth,\n 'neon-expansion-panel--disabled': disabled,\n },\n `neon-expansion-panel--${position}`,\n `neon-expansion-panel--${size}`,\n `neon-expansion-panel--${color}`,\n ]\"\n class=\"neon-expansion-panel\"\n >\n <div\n :aria-controls=\"id\"\n :class=\"[`neon-expansion-panel__header--${indicatorPosition}`]\"\n class=\"neon-expansion-panel__header\"\n tabindex=\"-1\"\n @click=\"toggleExpanded\"\n >\n <div\n class=\"neon-expansion-panel__label-container neon-expansion-panel__label-container--outline-text\"\n tabindex=\"0\"\n @keydown.enter=\"toggleExpanded\"\n @keydown.space.prevent=\"toggleExpanded\"\n >\n <slot :expanded=\"modelValue\" name=\"header\">\n <neon-icon v-if=\"icon\" :color=\"color\" :disabled=\"disabled\" :name=\"icon\" />\n <span class=\"neon-expansion-panel__label\">{{ label }}</span>\n </slot>\n </div>\n <neon-expansion-indicator :color=\"color\" :disabled=\"disabled\" :expanded=\"modelValue\" />\n </div>\n <div v-show=\"modelValue\" :id=\"id\" class=\"neon-expansion-panel__content\">\n <!-- @slot The expansion panel contents -->\n <slot></slot>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonExpansionPanel.ts\" />\n"],"names":["_hoisted_3","_createElementBlock","_ctx","_normalizeClass","_createElementVNode","args","_renderSlot","_createBlock","_component_neon_icon","_toDisplayString","_createVNode","_component_neon_expansion_indicator"],"mappings":";;;qEA+BgBA,IAAA,EAAA,OAAM,8BAA6B;;;cA9BjDC,EAuCM,OAAA;AAAA,IAtCH,iBAAeC,EAAA;AAAA,IACf,iBAAeA,EAAA;AAAA,IACf,OAAKC,EAAA,CAAA;AAAA;0CAAsDD,EAAA;AAAA,4CAAwDA,EAAA;AAAA,0CAAqDA,EAAA;AAAA;+BAAkDA,EAAA,QAAQ;AAAA,+BAAmCA,EAAA,IAAI;AAAA,+BAAmCA,EAAA,KAAK;AAAA,OAU5S,sBAAsB,CAAA;AAAA;IAE5BE,EAmBM,OAAA;AAAA,MAlBH,iBAAeF,EAAA;AAAA,MACf,OAAKC,EAAA,CAAA,CAAA,iCAAoCD,EAAA,iBAAiB,EAAA,GACrD,8BAA8B,CAAA;AAAA,MACpC,UAAS;AAAA,MACR,mCAAOA,EAAA,kBAAAA,EAAA,eAAA,GAAAG,CAAA;AAAA;MAERD,EAUM,OAAA;AAAA,QATJ,OAAM;AAAA,QACN,UAAS;AAAA,QACR,WAAO;AAAA,sCAAQF,EAAA,kBAAAA,EAAA,eAAA,GAAAG,CAAA,GAAc,CAAA,OAAA,CAAA;AAAA,wCACNH,EAAA,kBAAAA,EAAA,eAAA,GAAAG,CAAA,GAAc,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;;QAEtCC,EAGOJ,EAAA,QAAA,UAAA,EAHA,UAAUA,EAAA,WAAU,GAA3B,MAGO;AAAA,UAFYA,EAAA,aAAjBK,EAA0EC,GAAA;AAAA;YAAlD,OAAON,EAAA;AAAA,YAAQ,UAAUA,EAAA;AAAA,YAAW,MAAMA,EAAA;AAAA;UAClEE,EAA4D,QAA5DJ,GAA4DS,EAAfP,EAAA,KAAK,GAAA,CAAA;AAAA;;MAGtDQ,EAAuFC,GAAA;AAAA,QAA5D,OAAOT,EAAA;AAAA,QAAQ,UAAUA,EAAA;AAAA,QAAW,UAAUA,EAAA;AAAA;;MAE3EE,EAGM,OAAA;AAAA,MAHoB,IAAIF,EAAA;AAAA,MAAI,OAAM;AAAA;MAEtCI,EAAaJ,EAAA,QAAA,SAAA;AAAA;UAFFA,EAAA,UAAU;AAAA;;;;"}
@@ -1,6 +1,7 @@
1
- import { NeonVerticalPosition } from '@/common/enums/NeonVerticalPosition';
2
- import { NeonSize } from '@/common/enums/NeonSize';
3
1
  import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
2
+ import { NeonHorizontalPosition } from '@/common/enums/NeonHorizontalPosition';
3
+ import { NeonSize } from '@/common/enums/NeonSize';
4
+ import { NeonVerticalPosition } from '@/common/enums/NeonVerticalPosition';
4
5
  /**
5
6
  * <p>Expansion panels are used to show and hide content that may be less important or too large to display on screen
6
7
  * all the time. They can also be used to expand lists of items, e.g. <em>Show more</em>. The expansion panel consists
@@ -20,7 +21,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
20
21
  */
21
22
  label: {
22
23
  type: StringConstructor;
23
- required: true;
24
24
  };
25
25
  /**
26
26
  * Provide an id to support aria-controls. The id will be placed on the expansion panel content wrapper and the
@@ -44,6 +44,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
44
44
  type: () => NeonVerticalPosition;
45
45
  default: NeonVerticalPosition;
46
46
  };
47
+ /**
48
+ * The position of the expansion button. This can be located above the content to expand or below it.
49
+ */
50
+ indicatorPosition: {
51
+ type: () => NeonHorizontalPosition;
52
+ default: NeonHorizontalPosition;
53
+ };
47
54
  /**
48
55
  * The size of the expansion panel button.
49
56
  */
@@ -87,7 +94,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
87
94
  */
88
95
  label: {
89
96
  type: StringConstructor;
90
- required: true;
91
97
  };
92
98
  /**
93
99
  * Provide an id to support aria-controls. The id will be placed on the expansion panel content wrapper and the
@@ -111,6 +117,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
111
117
  type: () => NeonVerticalPosition;
112
118
  default: NeonVerticalPosition;
113
119
  };
120
+ /**
121
+ * The position of the expansion button. This can be located above the content to expand or below it.
122
+ */
123
+ indicatorPosition: {
124
+ type: () => NeonHorizontalPosition;
125
+ default: NeonHorizontalPosition;
126
+ };
114
127
  /**
115
128
  * The size of the expansion panel button.
116
129
  */
@@ -149,6 +162,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
149
162
  id: string;
150
163
  fullWidth: boolean;
151
164
  position: NeonVerticalPosition;
165
+ indicatorPosition: NeonHorizontalPosition;
152
166
  }, {}, {
153
167
  NeonExpansionIndicator: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
154
168
  expanded: {
@@ -192,6 +206,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
192
206
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
193
207
  NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
194
208
  name: {
209
+ /**
210
+ * An icon to display to the left of the label
211
+ */
195
212
  type: StringConstructor;
196
213
  required: true;
197
214
  };
@@ -218,6 +235,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
218
235
  icon: import("vue").ComputedRef<string | undefined>;
219
236
  }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
220
237
  name: {
238
+ /**
239
+ * An icon to display to the left of the label
240
+ */
221
241
  type: StringConstructor;
222
242
  required: true;
223
243
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@aotearoan/neon",
3
3
  "description": "Neon is a lightweight design library of Vue 3 components with minimal dependencies.",
4
- "version": "24.0.0",
4
+ "version": "24.1.0",
5
5
  "main": "./dist/neon.cjs.js",
6
6
  "module": "./dist/neon.es.js",
7
7
  "types": "./dist/src/neon.d.ts",
@@ -37,6 +37,20 @@
37
37
  &:focus {
38
38
  outline: none;
39
39
  }
40
+
41
+ &--left {
42
+ justify-content: flex-start;
43
+ gap: var(--neon-space-16);
44
+ flex: auto 0 1;
45
+
46
+ .neon-expansion-indicator {
47
+ order: 0;
48
+ }
49
+
50
+ .neon-expansion-panel__label-container {
51
+ order: 1;
52
+ }
53
+ }
40
54
  }
41
55
 
42
56
  &__label-container {