npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.d005298 → 0.0.0-insider.d6239e2 - Mend

@six-group/ui-library 0.0.0-insider.d005298 → 0.0.0-insider.d6239e2

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 (1495) hide show

package/dist/cjs/six-sidebar-item-group.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-d7748d51.js');
+const index = require('./index-417a06c8.js');
 const slot = require('./slot-1b1232a1.js');
-const sixSidebarItemGroupCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}.six-sidebar-item-group{--horizontal-padding:var(--six-spacing-x-large)}.six-sidebar-item-group--childless::part(content){padding:0 !important}.six-sidebar-item-group--subgroup::part(header){background-color:transparent !important}.six-sidebar-item-group__header-icon{margin-left:16px;transform:translate(0px, -3px)}.six-sidebar-details__header{display:flex}.six-sidebar-details__header-icon{margin-right:1em}.six-sidebar-details__link{text-decoration:none;display:block;color:inherit;width:100%}";
+const sixSidebarItemGroupCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}.six-sidebar-item-group{--horizontal-padding:var(--six-spacing-x-large)}.six-sidebar-item-group--childless::part(content){padding:0 !important}.six-sidebar-item-group--subgroup::part(header){background-color:transparent !important}.six-sidebar-item-group__header-icon{margin-left:16px;transform:translate(0px, -3px)}.six-sidebar-details__header{display:flex;overflow-wrap:anywhere}.six-sidebar-details__header-icon{margin-right:1em}.six-sidebar-details__link{text-decoration:none;display:block;color:inherit;width:100%}.six-sidebar-details__link:focus{outline:none}.six-sidebar-details__link:focus-visible{outline:var(--six-focus-ring);outline-offset:calc(-1 * var(--six-focus-ring-offset))}";
+const SixSidebarItemGroupStyle0 = sixSidebarItemGroupCss;
 const SixSidebarItemGroup = class {
     constructor(hostRef) {
@@ -52,7 +53,7 @@ const SixSidebarItemGroup = class {
                 'six-sidebar-item-group': true,
                 'six-sidebar-item-group--childless': !this.hasItems,
                 'six-sidebar-item-group--subgroup': this.isSubgroup(),
-            }, inline: true, open: this.open, "summary-icon": this.summaryIcon, hasContent: this.hasItems }, index.h("div", { slot: "summary" }, index.h("div", { class: "six-sidebar-details__header" }, this.icon && index.h("six-icon", { class: "six-sidebar-details__header-icon" }, this.icon), this.name)), this.provideSlot('summary-icon'), index.h("slot", null)));
+            }, inline: true, open: this.open, "summary-icon": this.summaryIcon, hasContent: this.hasItems, tabindex: this.renderAsHref() ? -1 : undefined }, index.h("div", { slot: "summary" }, index.h("div", { class: "six-sidebar-details__header" }, this.icon && index.h("six-icon", { class: "six-sidebar-details__header-icon" }, this.icon), this.name)), this.provideSlot('summary-icon'), index.h("slot", null)));
         if (this.renderAsHref()) {
             return (index.h("a", { class: "six-sidebar-details__link", href: this.href }, element));
         }
@@ -62,7 +63,7 @@ const SixSidebarItemGroup = class {
     }
     get host() { return index.getElement(this); }
 };
-SixSidebarItemGroup.style = sixSidebarItemGroupCss;
+SixSidebarItemGroup.style = SixSidebarItemGroupStyle0;
 exports.six_sidebar_item_group = SixSidebarItemGroup;

package/dist/cjs/six-sidebar-item-group.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-sidebar-item-group.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,sBAAsB,GAAG~~,+mBAA+mB~~;;~~MCejoB~~,mBAAmB;;;QAgDtB,gBAAW,GAAG,CAAC,IAAY;YACjC,IAAI,IAAI,CAAC,qBAAqB,EAAE;gBAC9B,QACEA,iBAAK,IAAI,EAAE,IAAI,IACbA,kBAAM,IAAI,EAAE,IAAI,GAAS,CACrB,EACN;aACH;YAED,QACEA,kBACE,IAAI,EAAE,IAAI,EACV,YAAY,EAAE;;oBACZ,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAkB,cAAc,IAAI,IAAI,CAAC,CAAC;oBAC1F,IAAI,IAAI,IAAI,IAAI,EAAE;wBAChB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;qBAC9D;iBACF,GACK,EACR;SACH,CAAC;wBAjEkB,KAAK;oBAGV,EAAE;oBAGF,EAAE;qBAGgB,EAAE;oBAGH,KAAK;;qCAKJ,KAAK;;;IAQtC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,GAAGC,YAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpC;IAEO,UAAU;;QAChB,OAAO,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,wBAAwB,CAAC,KAAI,IAAI,CAAC;KAC3E;IAEO,YAAY;QAClB,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;KAC5C;IAwBD,MAAM;QACJ,MAAM,OAAO,IACXD,yBACE,KAAK,EAAE;gBACL,wBAAwB,EAAE,IAAI;gBAC9B,mCAAmC,EAAE,CAAC,IAAI,CAAC,QAAQ;gBACnD,kCAAkC,EAAE,IAAI,CAAC,UAAU,EAAE;aACtD,EACD,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,IAAI,CAAC,WAAW,EAC9B,UAAU,EAAE,IAAI,CAAC,QAAQ,~~IAEzBA~~,iBAAK,IAAI,EAAC,SAAS,IACjBA,iBAAK,KAAK,EAAC,6BAA6B,IACrC,IAAI,CAAC,IAAI,IAAIA,sBAAU,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,IAAI,CAAY,EACtF,IAAI,CAAC,IAAI,CACN,CACF,EACL,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,EACjCA,qBAAQ,CACI,CACf,CAAC;QAEF,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;YACvB,QACEA,eAAG,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACjD,OAAO,CACN,EACJ;SACH;aAAM;YACL,OAAO,OAAO,CAAC;SAChB;KACF;;;;;;;","names":["h","hasSlot"],"sources":["src/components/six-sidebar-item-group/six-sidebar-item-group.scss?tag=six-sidebar-item-group&encapsulation=shadow","src/components/six-sidebar-item-group/six-sidebar-item-group.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n}\n\n.six-sidebar-item-group {\n --horizontal-padding: var(--six-spacing-x-large);\n}\n\n.six-sidebar-item-group--childless::part(content) {\n padding: 0 !important;\n}\n\n.six-sidebar-item-group--subgroup::part(header) {\n background-color: transparent !important;\n}\n\n.six-sidebar-item-group__header-icon {\n margin-left: 16px;\n transform: translate(0px, -3px);\n}\n\n.six-sidebar-details__header {\n display: flex;\n}\n\n.six-sidebar-details__header-icon {\n margin-right: 1em;\n}\n\n.six-sidebar-details__link {\n text-decoration: none;\n display: block;\n color: inherit;\n width: 100%;\n}\n","import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the nested sidebar [group] items.\n /\n\n@Component({\n tag: 'six-sidebar-item-group',\n styleUrl: 'six-sidebar-item-group.scss',\n shadow: true,\n})\nexport class SixSidebarItemGroup {\n @Element() readonly host!: HTMLSixSidebarItemGroupElement;\n\n @State() hasItems = false;\n\n /* Title of item group /\n @Prop() name = '';\n\n /* Icon of the group /\n @Prop() icon = '';\n\n /* A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. /\n @Prop({ reflect: true }) value = '';\n\n /* Indicates whether the sidebar is shown /\n @Prop({ reflect: true }) open = false;\n\n /* Custom summary icon name. /\n @Prop() summaryIcon?: string;\n\n @State() summaryIconHasContent = false;\n\n /\n Provide if the item should be rendered as anchor tag.\n * Note, that the href is added automatically when using routerLink in Angular.\n */\n @Prop({ reflect: true }) href: string \| undefined;\n\n connectedCallback() {\n this.handleSlotChange = this.handleSlotChange.bind(this);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n private handleSlotChange() {\n this.hasItems = hasSlot(this.host);\n }\n\n private isSubgroup() {\n return this.host.parentElement?.closest('six-sidebar-item-group') != null;\n }\n\n private renderAsHref(): boolean {\n return this.href != null && !this.hasItems;\n }\n\n private provideSlot = (name: string) => {\n if (this.summaryIconHasContent) {\n return (\n <div slot={name}>\n <slot name={name}></slot>\n </div>\n );\n }\n\n return (\n <slot\n name={name}\n onSlotchange={() => {\n const slot = this.host.shadowRoot?.querySelector<HTMLSlotElement>(`slot[name=\"${name}\"]`);\n if (slot != null) {\n this.summaryIconHasContent = slot.assignedNodes().length > 0;\n }\n }}\n ></slot>\n );\n };\n\n render() {\n const element = (\n <six-details\n class={{\n 'six-sidebar-item-group': true,\n 'six-sidebar-item-group--childless': !this.hasItems,\n 'six-sidebar-item-group--subgroup': this.isSubgroup(),\n }}\n inline={true}\n open={this.open}\n summary-icon={this.summaryIcon}\n hasContent={this.hasItems}\n >\n <div slot=\"summary\">\n <div class=\"six-sidebar-details__header\">\n {this.icon && <six-icon class=\"six-sidebar-details__header-icon\">{this.icon}</six-icon>}\n {this.name}\n </div>\n </div>\n {this.provideSlot('summary-icon')}\n <slot />\n </six-details>\n );\n\n if (this.renderAsHref()) {\n return (\n <a class=\"six-sidebar-details__link\" href={this.href}>\n {element}\n </a>\n );\n } else {\n return element;\n }\n }\n}\n"],"version":3}
1	+ {"file":"six-sidebar-item-group.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,sBAAsB,GAAG,kzBAAkzB,CAAC;AACl1B,kCAAe,sBAAsB;;MCcxB,mBAAmB;;;QAgDtB,gBAAW,GAAG,CAAC,IAAY;YACjC,IAAI,IAAI,CAAC,qBAAqB,EAAE;gBAC9B,QACEA,iBAAK,IAAI,EAAE,IAAI,IACbA,kBAAM,IAAI,EAAE,IAAI,GAAS,CACrB,EACN;aACH;YAED,QACEA,kBACE,IAAI,EAAE,IAAI,EACV,YAAY,EAAE;;oBACZ,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAkB,cAAc,IAAI,IAAI,CAAC,CAAC;oBAC1F,IAAI,IAAI,IAAI,IAAI,EAAE;wBAChB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;qBAC9D;iBACF,GACK,EACR;SACH,CAAC;wBAjEkB,KAAK;oBAGV,EAAE;oBAGF,EAAE;qBAGgB,EAAE;oBAGH,KAAK;;qCAKJ,KAAK;;;IAQtC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,GAAGC,YAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpC;IAEO,UAAU;;QAChB,OAAO,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,wBAAwB,CAAC,KAAI,IAAI,CAAC;KAC3E;IAEO,YAAY;QAClB,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;KAC5C;IAwBD,MAAM;QACJ,MAAM,OAAO,IACXD,yBACE,KAAK,EAAE;gBACL,wBAAwB,EAAE,IAAI;gBAC9B,mCAAmC,EAAE,CAAC,IAAI,CAAC,QAAQ;gBACnD,kCAAkC,EAAE,IAAI,CAAC,UAAU,EAAE;aACtD,EACD,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,IAAI,CAAC,WAAW,EAC9B,UAAU,EAAE,IAAI,CAAC,QAAQ,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC,GAAG,SAAS,IAE9CA,iBAAK,IAAI,EAAC,SAAS,IACjBA,iBAAK,KAAK,EAAC,6BAA6B,IACrC,IAAI,CAAC,IAAI,IAAIA,sBAAU,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,IAAI,CAAY,EACtF,IAAI,CAAC,IAAI,CACN,CACF,EACL,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,EACjCA,qBAAQ,CACI,CACf,CAAC;QAEF,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;YACvB,QACEA,eAAG,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACjD,OAAO,CACN,EACJ;SACH;aAAM;YACL,OAAO,OAAO,CAAC;SAChB;KACF;;;;;;;","names":["h","hasSlot"],"sources":["src/components/six-sidebar-item-group/six-sidebar-item-group.scss?tag=six-sidebar-item-group&encapsulation=shadow","src/components/six-sidebar-item-group/six-sidebar-item-group.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n}\n\n.six-sidebar-item-group {\n --horizontal-padding: var(--six-spacing-x-large);\n}\n\n.six-sidebar-item-group--childless::part(content) {\n padding: 0 !important;\n}\n\n.six-sidebar-item-group--subgroup::part(header) {\n background-color: transparent !important;\n}\n\n.six-sidebar-item-group__header-icon {\n margin-left: 16px;\n transform: translate(0px, -3px);\n}\n\n.six-sidebar-details__header {\n display: flex;\n overflow-wrap: anywhere;\n}\n\n.six-sidebar-details__header-icon {\n margin-right: 1em;\n}\n\n.six-sidebar-details__link {\n text-decoration: none;\n display: block;\n color: inherit;\n width: 100%;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: calc(-1 * var(--six-focus-ring-offset));\n }\n}\n","import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the nested sidebar [group] items.\n /\n\n@Component({\n tag: 'six-sidebar-item-group',\n styleUrl: 'six-sidebar-item-group.scss',\n shadow: true,\n})\nexport class SixSidebarItemGroup {\n @Element() readonly host!: HTMLSixSidebarItemGroupElement;\n\n @State() hasItems = false;\n\n /* Title of item group /\n @Prop() name = '';\n\n /* Icon of the group /\n @Prop() icon = '';\n\n /* A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. /\n @Prop({ reflect: true }) value = '';\n\n /* Indicates whether the sidebar is shown /\n @Prop({ reflect: true }) open = false;\n\n /* Custom summary icon name. /\n @Prop() summaryIcon?: string;\n\n @State() summaryIconHasContent = false;\n\n /\n Provide if the item should be rendered as anchor tag.\n * Note, that the href is added automatically when using routerLink in Angular.\n */\n @Prop({ reflect: true }) href: string \| undefined;\n\n connectedCallback() {\n this.handleSlotChange = this.handleSlotChange.bind(this);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n private handleSlotChange() {\n this.hasItems = hasSlot(this.host);\n }\n\n private isSubgroup() {\n return this.host.parentElement?.closest('six-sidebar-item-group') != null;\n }\n\n private renderAsHref(): boolean {\n return this.href != null && !this.hasItems;\n }\n\n private provideSlot = (name: string) => {\n if (this.summaryIconHasContent) {\n return (\n <div slot={name}>\n <slot name={name}></slot>\n </div>\n );\n }\n\n return (\n <slot\n name={name}\n onSlotchange={() => {\n const slot = this.host.shadowRoot?.querySelector<HTMLSlotElement>(`slot[name=\"${name}\"]`);\n if (slot != null) {\n this.summaryIconHasContent = slot.assignedNodes().length > 0;\n }\n }}\n ></slot>\n );\n };\n\n render() {\n const element = (\n <six-details\n class={{\n 'six-sidebar-item-group': true,\n 'six-sidebar-item-group--childless': !this.hasItems,\n 'six-sidebar-item-group--subgroup': this.isSubgroup(),\n }}\n inline={true}\n open={this.open}\n summary-icon={this.summaryIcon}\n hasContent={this.hasItems}\n tabindex={this.renderAsHref() ? -1 : undefined}\n >\n <div slot=\"summary\">\n <div class=\"six-sidebar-details__header\">\n {this.icon && <six-icon class=\"six-sidebar-details__header-icon\">{this.icon}</six-icon>}\n {this.name}\n </div>\n </div>\n {this.provideSlot('summary-icon')}\n <slot />\n </six-details>\n );\n\n if (this.renderAsHref()) {\n return (\n <a class=\"six-sidebar-details__link\" href={this.href}>\n {element}\n </a>\n );\n } else {\n return element;\n }\n }\n}\n"],"version":3}

package/dist/cjs/six-sidebar-item.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-d7748d51.js');
+const index = require('./index-417a06c8.js');
-const sixSidebarItemCss = ":host{display:block}a{text-decoration:none;display:block}.sidebar-item{padding:8px 8px 16px 16px;font-size:0.9rem;color:var(--six-sidebar-color);cursor:pointer;font-family:var(--six-font-family)}.sidebar-item:hover:not(.sidebar-item--disabled){color:var(--six-color-web-rock-600)}.sidebar-item.sidebar-item--disabled{outline:none;color:var(--six-input-color-disabled);cursor:not-allowed}.sidebar-item.sidebar-item--selected{font-weight:var(--six-font-weight-bold)}";
+const sixSidebarItemCss = ":host{display:block}a{text-decoration:none;display:block}.sidebar-item{padding:8px 8px 16px 16px;font-size:0.9rem;color:var(--six-sidebar-color);cursor:pointer;font-family:var(--six-font-family)}.sidebar-item:hover:not(.sidebar-item--disabled){color:var(--six-color-web-rock-600)}.sidebar-item.sidebar-item--disabled{outline:none;color:var(--six-input-color-disabled);cursor:not-allowed}.sidebar-item.sidebar-item--selected{font-weight:var(--six-font-weight-bold)}.sidebar-item:focus{outline:none}.sidebar-item:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}";
+const SixSidebarItemStyle0 = sixSidebarItemCss;
 const SixSidebarItem = class {
     constructor(hostRef) {
@@ -16,14 +17,14 @@ const SixSidebarItem = class {
     }
     render() {
         const Tag = this.href != null ? 'a' : 'div';
-        return (index.h(Tag, { class: {
+        return (index.h(Tag, { key: '5618f9f2b4351163ed14c415ba2b4d010a3e987e', class: {
                 'sidebar-item': true,
                 'sidebar-item--selected': this.selected,
                 'sidebar-item--disabled': this.disabled,
-            }, role: "menuitem", href: this.href, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("slot", null)));
+            }, role: "menuitem", href: this.href, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("slot", { key: '4a0d18c33ba2c73f417374e39db25fe7c4a6a960' })));
     }
 };
-SixSidebarItem.style = sixSidebarItemCss;
+SixSidebarItem.style = SixSidebarItemStyle0;
 exports.six_sidebar_item = SixSidebarItem;

package/dist/cjs/six-sidebar-item.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-sidebar-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,~~kdAAkd~~;;~~MCc/d~~,cAAc;;;qBAEQ,EAAE;wBAGC,KAAK;wBAGL,KAAK;;;IAQzC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,GAAG,GAAG,KAAK,CAAC;QAC5C,QACEA,QAAC,GAAG,~~IACF~~,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,QAAQ;gBACvC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;aACxC,EACD,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,mBACA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,IAE/CA,~~qBAAa~~,CACT,EACN;KACH;;;;;;","names":["h"],"sources":["src/components/six-sidebar-item/six-sidebar-item.scss?tag=six-sidebar-item&encapsulation=shadow","src/components/six-sidebar-item/six-sidebar-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\na {\n text-decoration: none;\n display: block;\n}\n\n.sidebar-item {\n padding: 8px 8px 16px 16px;\n font-size: 0.9rem;\n color: var(--six-sidebar-color);\n cursor: pointer;\n font-family: var(--six-font-family);\n\n &:hover:not(.sidebar-item--disabled) {\n color: var(--six-color-web-rock-600);\n }\n\n &.sidebar-item--disabled {\n outline: none;\n color: var(--six-input-color-disabled);\n cursor: not-allowed;\n }\n\n &.sidebar-item--selected {\n font-weight: var(--six-font-weight-bold);\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the nested displayed text of the item.\n /\n\n@Component({\n tag: 'six-sidebar-item',\n styleUrl: 'six-sidebar-item.scss',\n shadow: true,\n})\nexport class SixSidebarItem {\n /* A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. /\n @Prop({ reflect: true }) value = '';\n\n /* Set to true to draw the item in a selected state. /\n @Prop({ reflect: true }) selected = false;\n\n /* Set to true to draw the sidebar item in a disabled state. /\n @Prop({ reflect: true }) disabled = false;\n\n /\n Provide if the item should be rendered as anchor tag.\n * Note, that the href is added automatically when using routerLink in Angular.\n */\n @Prop({ reflect: true }) href: string \| undefined;\n\n render() {\n const Tag = this.href != null ? 'a' : 'div';\n return (\n <Tag\n class={{\n 'sidebar-item': true,\n 'sidebar-item--selected': this.selected,\n 'sidebar-item--disabled': this.disabled,\n }}\n role=\"menuitem\"\n href={this.href}\n aria-selected={this.selected ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <slot></slot>\n </Tag>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-sidebar-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,ylBAAylB,CAAC;AACpnB,6BAAe,iBAAiB;;MCanB,cAAc;;;qBAEQ,EAAE;wBAGC,KAAK;wBAGL,KAAK;;;IAQzC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,GAAG,GAAG,KAAK,CAAC;QAC5C,QACEA,QAAC,GAAG,qDACF,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,QAAQ;gBACvC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;aACxC,EACD,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,mBACA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,IAE/CA,oEAAa,CACT,EACN;KACH;;;;;;","names":["h"],"sources":["src/components/six-sidebar-item/six-sidebar-item.scss?tag=six-sidebar-item&encapsulation=shadow","src/components/six-sidebar-item/six-sidebar-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\na {\n text-decoration: none;\n display: block;\n}\n\n.sidebar-item {\n padding: 8px 8px 16px 16px;\n font-size: 0.9rem;\n color: var(--six-sidebar-color);\n cursor: pointer;\n font-family: var(--six-font-family);\n\n &:hover:not(.sidebar-item--disabled) {\n color: var(--six-color-web-rock-600);\n }\n\n &.sidebar-item--disabled {\n outline: none;\n color: var(--six-input-color-disabled);\n cursor: not-allowed;\n }\n\n &.sidebar-item--selected {\n font-weight: var(--six-font-weight-bold);\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: var(--six-focus-ring-offset);\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the nested displayed text of the item.\n /\n\n@Component({\n tag: 'six-sidebar-item',\n styleUrl: 'six-sidebar-item.scss',\n shadow: true,\n})\nexport class SixSidebarItem {\n /* A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. /\n @Prop({ reflect: true }) value = '';\n\n /* Set to true to draw the item in a selected state. /\n @Prop({ reflect: true }) selected = false;\n\n /* Set to true to draw the sidebar item in a disabled state. /\n @Prop({ reflect: true }) disabled = false;\n\n /\n Provide if the item should be rendered as anchor tag.\n * Note, that the href is added automatically when using routerLink in Angular.\n */\n @Prop({ reflect: true }) href: string \| undefined;\n\n render() {\n const Tag = this.href != null ? 'a' : 'div';\n return (\n <Tag\n class={{\n 'sidebar-item': true,\n 'sidebar-item--selected': this.selected,\n 'sidebar-item--disabled': this.disabled,\n }}\n role=\"menuitem\"\n href={this.href}\n aria-selected={this.selected ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <slot></slot>\n </Tag>\n );\n }\n}\n"],"version":3}

package/dist/cjs/six-sidebar.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-d7748d51.js');
+const index = require('./index-417a06c8.js');
 const scroll = require('./scroll-68033901.js');
 const sixSidebarCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;height:100%}.sidebar__container{height:100%;overflow:auto}.sidebar__container.sidebar--open{border-right:1px solid var(--six-color-web-rock-300)}.sidebar__container:not(.sidebar--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.sidebar--left{color:var(--six-sidebar-color);background-color:var(--six-sidebar-background-color);transition:var(--six-transition-medium) margin-left;background-size:300vw 70%;background-position:bottom;background-repeat:no-repeat}.sidebar--right{transition:var(--six-transition-medium) margin-right}.sidebar--open.sidebar--left{margin-right:2px}.sidebar--open.sidebar--right{margin-left:2px}";
+const SixSidebarStyle0 = sixSidebarCss;
 const isSidebarItemGroup = (node) => { var _a; return ((_a = node === null || node === void 0 ? void 0 : node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'six-sidebar-item-group'; };
 const SixSidebar = class {
@@ -179,7 +180,7 @@ const SixSidebar = class {
         this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
     }
     render() {
-        return (index.h("host", { class: "six-sidebar" }, index.h("div", { class: {
+        return (index.h("host", { key: '056450e289f2d1edff97ee37efbab15b85a76527', class: "six-sidebar" }, index.h("div", { key: 'c36b3f22dbc31e448373a0bb61886bb2acf383ed', class: {
                 sidebar__container: true,
                 'sidebar--visible': this.isVisible,
                 'sidebar--open': this.open,
@@ -188,13 +189,13 @@ const SixSidebar = class {
             }, style: {
                 width: this.width,
                 [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,
-            }, ref: (el) => (this.sidebar = el), "aria-hidden": this.open ? 'false' : 'true', onTransitionEnd: this.handleTransitionEnd }, index.h("slot", null))));
+            }, ref: (el) => (this.sidebar = el), "aria-hidden": this.open ? 'false' : 'true', onTransitionEnd: this.handleTransitionEnd }, index.h("slot", { key: '59362071f0a76df0714699478e8fcea6a34c83b3' }))));
     }
     static get watchers() { return {
         "open": ["handleOpenChange"]
     }; }
 };
-SixSidebar.style = sixSidebarCss;
+SixSidebar.style = SixSidebarStyle0;
 exports.six_sidebar = SixSidebar;

package/dist/cjs/six-sidebar.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-sidebar.entry.cjs.js","mappings":"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","names":["scrollIntoView","h"],"sources":["src/components/six-sidebar/six-sidebar.scss?tag=six-sidebar&encapsulation=shadow","src/components/six-sidebar/six-sidebar.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n@import 'src/global/mixins/scrollbar';\n\n:host {\n display: block;\n height: 100%;\n}\n\n.sidebar {\n &__container {\n // scroll\n height: 100%;\n overflow: auto;\n\n &.sidebar--open {\n border-right: 1px solid var(--six-color-web-rock-300);\n }\n\n &:not(.sidebar--visible) {\n @include hidden;\n }\n }\n\n &--left {\n color: var(--six-sidebar-color);\n background-color: var(--six-sidebar-background-color);\n // collapse\n transition: var(--six-transition-medium) margin-left;\n // six background\n background-size: 300vw 70%;\n background-position: bottom;\n background-repeat: no-repeat;\n }\n\n &--right {\n // collapse\n transition: var(--six-transition-medium) margin-right;\n }\n\n // if the sidebar is embedded within six-root it cuts-off the border styling, for thus we need to guarante a margin\n &--open {\n &.sidebar--left {\n margin-right: 2px;\n }\n\n &.sidebar--right {\n margin-left: 2px;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { scrollIntoView } from '../../utils/scroll';\n\nconst isSidebarItemGroup = (node?: Element \| null): boolean =>\n node?.tagName?.toLowerCase() === 'six-sidebar-item-group';\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the nested side bar [group] items.\n /\n\n@Component({\n tag: 'six-sidebar',\n styleUrl: 'six-sidebar.scss',\n shadow: true,\n})\nexport class SixSidebar {\n private willShow = false;\n private willHide = false;\n\n private sidebar?: HTMLElement;\n\n @State() isVisible = false;\n\n /* Sidebar position /\n @Prop() position: 'left' \| 'right' = 'left';\n\n /* Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* Sidebar width /\n @Prop() width = '16rem';\n\n /* Define whether sidebar is toggled meaning only one menu can be open at the same time/\n @Prop() toggled = false;\n\n /* Emitted when the sidebar opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-sidebar-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the sidebar opens and all transitions are complete. /\n @Event({ eventName: 'six-sidebar-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the sidebar closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-sidebar-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the sidebar closes and all transitions are complete. /\n @Event({ eventName: 'six-sidebar-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /\n Emitted when the sidebar opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n * allow you to set it on a different element in the sidebar, such as an input or button.\n /\n @Event({ eventName: 'six-sidebar-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.type === 'transitionend' && target.classList.contains('sidebar__container')) {\n this.resetTransitionVariables();\n }\n };\n\n componentWillLoad() {\n // Show on init if open\n if (this.open) {\n void this.show();\n // if the sidebar is open by default we need to manually reset the\n // transition variables since there will be no transition event\n this.resetTransitionVariables();\n }\n }\n\n componentDidRender() {\n this.setupTogglableMenuItems();\n }\n\n disconnectedCallback() {\n this.sidebar?.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n }\n\n private closeSiblingDetailsOnShow = (event: Event) => {\n const clickedMenuItem = event.target as HTMLElement;\n if (this.sidebar != null) {\n scrollIntoView(clickedMenuItem, this.sidebar);\n }\n\n const closeAllSiblingsBySiblingProperty = (\n getSibling: (node: Element \| null \| undefined) => Element \| null \| undefined\n ) => {\n let node: Element \| null \| undefined = clickedMenuItem;\n while (getSibling(node) != null) {\n node = getSibling(node);\n if (isSidebarItemGroup(node)) {\n const detailsElement = node?.shadowRoot?.querySelector('six-details');\n if (detailsElement != null) {\n detailsElement.open = false;\n }\n }\n }\n };\n\n // close all previous siblings\n closeAllSiblingsBySiblingProperty((node) => node?.previousElementSibling);\n // close all further siblings\n closeAllSiblingsBySiblingProperty((node) => node?.nextElementSibling);\n };\n\n private setupTogglableMenuItems() {\n if (!this.toggled \|\| this.sidebar == null) return;\n this.markAllMenuItemsAsSelectableEmpty();\n this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n }\n\n private markAllMenuItemsAsSelectableEmpty() {\n // when you have a toggled menu you also want to close other menu items when you click on an item without children\n // nice benefit this item will then also be highlighted\n const slot = this.sidebar?.querySelector('slot');\n const nodes = slot?.assignedElements() \|\| [];\n\n // since we don't just want to make the top level empty menuItems selectable in toggled mode,\n // but also nested items we need to traverse the whole menu item tree\n const menuItems = [];\n while (nodes.length > 0) {\n const node = nodes.pop();\n if (node?.shadowRoot == null) {\n continue;\n }\n\n // collect six-details in the current shadowDOM\n const menuItemsForCurrentNode = node.shadowRoot.querySelectorAll('six-details');\n menuItems.push(...menuItemsForCurrentNode);\n\n // collect all six-sidebar-item-group children of the current node to afterwards check their shadowDOM too\n const newItemGroups = Array.from(node.children).filter(isSidebarItemGroup);\n nodes.push(...newItemGroups);\n }\n\n menuItems.forEach((details) => (details.selectableEmpty = true));\n }\n\n /* Toggles whether the sidebar should be shown or hidden /\n @Method()\n async toggle() {\n if (this.willShow \|\| this.willHide) {\n return;\n }\n\n if (this.open) {\n await this.hide();\n } else {\n await this.show();\n }\n }\n\n /* Shows the sidebar /\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n }\n\n /* Hides the sidebar /\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n }\n\n /* Allows to select a menu item programmatically by index /\n @Method()\n async selectItemByIndex(index: number) {\n if (this.sidebar == null) return;\n\n const slot = this.sidebar.querySelector('slot');\n const menuItemsOnRootLevel: HTMLSixDetailsElement[] = (slot?.assignedElements() \|\| []).flatMap((el) => {\n const detailsElement = el.shadowRoot?.querySelector('six-details');\n if (detailsElement == null) {\n return [];\n }\n return [detailsElement];\n });\n if (index < 0 \|\| index > menuItemsOnRootLevel.length - 1) {\n console.error(\n `Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${index}`\n );\n return;\n }\n await menuItemsOnRootLevel[index].show();\n }\n\n /* Allows to select a menu item programmatically by name */\n @Method()\n async selectItemByName(value: string) {\n const slot = this.sidebar?.querySelector('slot');\n const sidebarItemGroups = slot?.assignedElements() as HTMLSixSidebarItemGroupElement[];\n if (sidebarItemGroups == null) {\n return;\n }\n\n const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => el?.name === value);\n const selectedItem = sidebarItemGroups.at(indexOfSelectedElement)?.shadowRoot?.querySelector('six-details');\n await selectedItem?.show();\n }\n\n private resetTransitionVariables() {\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n\n render() {\n return (\n <host class=\"six-sidebar\">\n <div\n class={{\n sidebar__container: true,\n 'sidebar--visible': this.isVisible,\n 'sidebar--open': this.open,\n 'sidebar--left': this.position === 'left',\n 'sidebar--right': this.position === 'right',\n }}\n style={{\n width: this.width,\n [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,\n }}\n ref={(el) => (this.sidebar = el)}\n aria-hidden={this.open ? 'false' : 'true'}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <slot />\n </div>\n </host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-sidebar.entry.cjs.js","mappings":"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","names":["scrollIntoView","h"],"sources":["src/components/six-sidebar/six-sidebar.scss?tag=six-sidebar&encapsulation=shadow","src/components/six-sidebar/six-sidebar.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n@import 'src/global/mixins/scrollbar';\n\n:host {\n display: block;\n height: 100%;\n}\n\n.sidebar {\n &__container {\n // scroll\n height: 100%;\n overflow: auto;\n\n &.sidebar--open {\n border-right: 1px solid var(--six-color-web-rock-300);\n }\n\n &:not(.sidebar--visible) {\n @include hidden;\n }\n }\n\n &--left {\n color: var(--six-sidebar-color);\n background-color: var(--six-sidebar-background-color);\n // collapse\n transition: var(--six-transition-medium) margin-left;\n // six background\n background-size: 300vw 70%;\n background-position: bottom;\n background-repeat: no-repeat;\n }\n\n &--right {\n // collapse\n transition: var(--six-transition-medium) margin-right;\n }\n\n // if the sidebar is embedded within six-root it cuts-off the border styling, for thus we need to guarante a margin\n &--open {\n &.sidebar--left {\n margin-right: 2px;\n }\n\n &.sidebar--right {\n margin-left: 2px;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { scrollIntoView } from '../../utils/scroll';\n\nconst isSidebarItemGroup = (node?: Element \| null): boolean =>\n node?.tagName?.toLowerCase() === 'six-sidebar-item-group';\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the nested side bar [group] items.\n /\n\n@Component({\n tag: 'six-sidebar',\n styleUrl: 'six-sidebar.scss',\n shadow: true,\n})\nexport class SixSidebar {\n private willShow = false;\n private willHide = false;\n\n private sidebar?: HTMLElement;\n\n @State() isVisible = false;\n\n /* Sidebar position /\n @Prop() position: 'left' \| 'right' = 'left';\n\n /* Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* Sidebar width /\n @Prop() width = '16rem';\n\n /* Define whether sidebar is toggled meaning only one menu can be open at the same time/\n @Prop() toggled = false;\n\n /* Emitted when the sidebar opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-sidebar-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the sidebar opens and all transitions are complete. /\n @Event({ eventName: 'six-sidebar-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the sidebar closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-sidebar-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the sidebar closes and all transitions are complete. /\n @Event({ eventName: 'six-sidebar-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /\n Emitted when the sidebar opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n * allow you to set it on a different element in the sidebar, such as an input or button.\n /\n @Event({ eventName: 'six-sidebar-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.type === 'transitionend' && target.classList.contains('sidebar__container')) {\n this.resetTransitionVariables();\n }\n };\n\n componentWillLoad() {\n // Show on init if open\n if (this.open) {\n void this.show();\n // if the sidebar is open by default we need to manually reset the\n // transition variables since there will be no transition event\n this.resetTransitionVariables();\n }\n }\n\n componentDidRender() {\n this.setupTogglableMenuItems();\n }\n\n disconnectedCallback() {\n this.sidebar?.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n }\n\n private closeSiblingDetailsOnShow = (event: Event) => {\n const clickedMenuItem = event.target as HTMLElement;\n if (this.sidebar != null) {\n scrollIntoView(clickedMenuItem, this.sidebar);\n }\n\n const closeAllSiblingsBySiblingProperty = (\n getSibling: (node: Element \| null \| undefined) => Element \| null \| undefined\n ) => {\n let node: Element \| null \| undefined = clickedMenuItem;\n while (getSibling(node) != null) {\n node = getSibling(node);\n if (isSidebarItemGroup(node)) {\n const detailsElement = node?.shadowRoot?.querySelector('six-details');\n if (detailsElement != null) {\n detailsElement.open = false;\n }\n }\n }\n };\n\n // close all previous siblings\n closeAllSiblingsBySiblingProperty((node) => node?.previousElementSibling);\n // close all further siblings\n closeAllSiblingsBySiblingProperty((node) => node?.nextElementSibling);\n };\n\n private setupTogglableMenuItems() {\n if (!this.toggled \|\| this.sidebar == null) return;\n this.markAllMenuItemsAsSelectableEmpty();\n this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n }\n\n private markAllMenuItemsAsSelectableEmpty() {\n // when you have a toggled menu you also want to close other menu items when you click on an item without children\n // nice benefit this item will then also be highlighted\n const slot = this.sidebar?.querySelector('slot');\n const nodes = slot?.assignedElements() \|\| [];\n\n // since we don't just want to make the top level empty menuItems selectable in toggled mode,\n // but also nested items we need to traverse the whole menu item tree\n const menuItems = [];\n while (nodes.length > 0) {\n const node = nodes.pop();\n if (node?.shadowRoot == null) {\n continue;\n }\n\n // collect six-details in the current shadowDOM\n const menuItemsForCurrentNode = node.shadowRoot.querySelectorAll('six-details');\n menuItems.push(...menuItemsForCurrentNode);\n\n // collect all six-sidebar-item-group children of the current node to afterwards check their shadowDOM too\n const newItemGroups = Array.from(node.children).filter(isSidebarItemGroup);\n nodes.push(...newItemGroups);\n }\n\n menuItems.forEach((details) => (details.selectableEmpty = true));\n }\n\n /* Toggles whether the sidebar should be shown or hidden /\n @Method()\n async toggle() {\n if (this.willShow \|\| this.willHide) {\n return;\n }\n\n if (this.open) {\n await this.hide();\n } else {\n await this.show();\n }\n }\n\n /* Shows the sidebar /\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n }\n\n /* Hides the sidebar /\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n }\n\n /* Allows to select a menu item programmatically by index /\n @Method()\n async selectItemByIndex(index: number) {\n if (this.sidebar == null) return;\n\n const slot = this.sidebar.querySelector('slot');\n const menuItemsOnRootLevel: HTMLSixDetailsElement[] = (slot?.assignedElements() \|\| []).flatMap((el) => {\n const detailsElement = el.shadowRoot?.querySelector('six-details');\n if (detailsElement == null) {\n return [];\n }\n return [detailsElement];\n });\n if (index < 0 \|\| index > menuItemsOnRootLevel.length - 1) {\n console.error(\n `Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${index}`\n );\n return;\n }\n await menuItemsOnRootLevel[index].show();\n }\n\n /* Allows to select a menu item programmatically by name */\n @Method()\n async selectItemByName(value: string) {\n const slot = this.sidebar?.querySelector('slot');\n const sidebarItemGroups = slot?.assignedElements() as HTMLSixSidebarItemGroupElement[];\n if (sidebarItemGroups == null) {\n return;\n }\n\n const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => el?.name === value);\n const selectedItem = sidebarItemGroups.at(indexOfSelectedElement)?.shadowRoot?.querySelector('six-details');\n await selectedItem?.show();\n }\n\n private resetTransitionVariables() {\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n\n render() {\n return (\n <host class=\"six-sidebar\">\n <div\n class={{\n sidebar__container: true,\n 'sidebar--visible': this.isVisible,\n 'sidebar--open': this.open,\n 'sidebar--left': this.position === 'left',\n 'sidebar--right': this.position === 'right',\n }}\n style={{\n width: this.width,\n [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,\n }}\n ref={(el) => (this.sidebar = el)}\n aria-hidden={this.open ? 'false' : 'true'}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <slot />\n </div>\n </host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/six-spinner.cjs.entry.js CHANGED Viewed

@@ -2,26 +2,60 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-d7748d51.js');
+const index = require('./index-417a06c8.js');
-const sixSpinnerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);--stroke-width:2px;display:inline-flex}.spinner{display:inline-block;width:1em;height:1em;border-radius:50%;border:solid var(--stroke-width) var(--track-color);border-top-color:var(--indicator-color);border-right-color:var(--indicator-color);animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.six-spinner{width:auto;height:auto;position:relative}.six-spinner .six-spinner__container{margin:0;transform:translateX(0)}.six-spinner .six-spinner__container svg{transform:translateX(0)}.six-spinner__container{position:relative;margin:0 auto;top:calc(50% - 20px);z-index:1}.six-spinner__container,.six-spinner__container svg{width:40px;height:40px;display:block;transform:translateX(40px)}.six-spinner path{stroke-dashoffset:70px;stroke-dasharray:70, 444;-webkit-animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite}@-webkit-keyframes six-spinner{to{stroke-dashoffset:-444}}@keyframes six-spinner{to{stroke-dashoffset:-444}}";
+const sixSpinnerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);--stroke-width:2px;display:inline-flex}.spinner{display:inline-block;width:1em;height:1em;border-radius:50%;border:solid var(--stroke-width) var(--track-color);border-top-color:var(--indicator-color);border-right-color:var(--indicator-color);animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.six-spinner{width:auto;height:auto;position:relative}.six-spinner .six-spinner__container{margin:0;transform:translateX(0)}.six-spinner .six-spinner__container svg{transform:translateX(0)}.six-spinner__container{position:relative;margin:0 auto;top:calc(50% - 20px);z-index:1}.six-spinner__container,.six-spinner__container svg{width:40px;height:40px;display:block;transform:translateX(40px)}.six-spinner path{stroke-dashoffset:70px;stroke-dasharray:70, 444;-webkit-animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite}.six-spinner polygon{stroke-dasharray:310;stroke-dashoffset:310;animation:big-polygon-draw 2s ease-in-out infinite;-webkit-animation:big-polygon-draw 2s ease-in-out infinite}.six-spinner polygon:nth-child(2),.six-spinner polygon:nth-child(3){stroke-dasharray:110;stroke-dashoffset:110;animation:small-polygon-draw 2s ease-in-out infinite;-webkit-animation:small-polygon-draw 2s ease-in-out infinite}@keyframes big-polygon-draw{0%,100%{stroke-dashoffset:310}50%{stroke-dashoffset:140}}@-webkit-keyframes big-polygon-draw{0%,100%{stroke-dashoffset:310}50%{stroke-dashoffset:140}}@keyframes small-polygon-draw{0%,100%{stroke-dashoffset:110}50%{stroke-dashoffset:50}}@-webkit-keyframes small-polygon-draw{0%,100%{stroke-dashoffset:110}50%{stroke-dashoffset:50}}@-webkit-keyframes six-spinner{to{stroke-dashoffset:-444}}@keyframes six-spinner{to{stroke-dashoffset:-444}}";
+const SixSpinnerStyle0 = sixSpinnerCss;
 const SixSpinner = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.six = false;
+        this.logo = undefined;
+        this.six = undefined;
     }
+    /**
+     * Renders a container with a given SVG content.
+     */
+    renderWrapper(content) {
+        return (index.h("span", { class: "six-spinner", "aria-busy": "true", "aria-live": "polite" }, index.h("div", { class: "six-spinner__container" }, content)));
+    }
+    /**
+     * Renders the SIX logo spinner.
+     */
     renderSIXLogo() {
-        return (index.h("span", { class: "six-spinner", "aria-busy": "true", "aria-live": "polite" }, index.h("div", { class: "six-spinner__container" }, index.h("svg", { viewBox: "0 0 40 40", part: "svg" }, index.h("path", { fill: "none", stroke: "#de3919", "stroke-width": "5", "stroke-linecap": "round", d: "M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42" })))));
+        const sixLogo = (index.h("svg", { viewBox: "0 0 40 40", part: "svg" }, index.h("path", { fill: "none", stroke: "#de3919", "stroke-width": "5", "stroke-linecap": "round", d: "M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42" })));
+        return this.renderWrapper(sixLogo);
+    }
+    /**
+     * Renders the BME logo spinner.
+     */
+    renderBMELogo() {
+        const bmeLogo = (index.h("svg", { viewBox: "0 0 45 55", part: "svg" }, index.h("polygon", { fill: "none", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", points: "4.42 51.96 17.02 31.473 2 31.473 2 22.486 17.02 22.486 4.42 2 15.404 2 30.289 26.98 14.763 51.96 4.42 51.96" }), index.h("polygon", { fill: "none", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", points: "42 51.96 31.655 51.96 24.598 40.498 29.831 32.073 42 51.96" }), index.h("polygon", { fill: "none", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", points: "24.518 12.719 31.014 2 42 2 29.831 21.637 24.518 12.719" })));
+        return this.renderWrapper(bmeLogo);
     }
-    renderSimple() {
+    /**
+     * Renders a simple spinner.
+     */
+    renderSimpleSpinner() {
         return index.h("span", { part: "base", class: "spinner", "aria-busy": "true", "aria-live": "polite" });
     }
     render() {
-        return this.six ? this.renderSIXLogo() : this.renderSimple();
+        // Check the deprecated `six` property first
+        if (this.six) {
+            console.warn('The "six" prop is deprecated. Use "logo=\'six\'" instead.');
+            return this.renderSIXLogo();
+        }
+        switch (this.logo) {
+            case 'six':
+                return this.renderSIXLogo();
+            case 'bme':
+                return this.renderBMELogo();
+            default:
+                return this.renderSimpleSpinner();
+        }
     }
 };
-SixSpinner.style = sixSpinnerCss;
+SixSpinner.style = SixSpinnerStyle0;
 exports.six_spinner = SixSpinner;

package/dist/cjs/six-spinner.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-spinner.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,~~8vCAA8vC~~;;~~MCgBvwC~~,UAAU~~;;;mBAEP~~,~~KAAK;;IAEX~~,~~aAAa~~;~~QACnB~~,QACEA,kBAAM,KAAK,EAAC,aAAa,eAAW,MAAM,eAAW,QAAQ,IAC3DA,iBAAK,KAAK,EAAC,wBAAwB,~~IACjCA~~,iBAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,KAAK,IACjCA,kBACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,kBACH,GAAG,oBACD,OAAO,EACtB,CAAC,EAAC,mHAAmH,GAC/G,CACJ,~~CACF~~,~~CACD~~,~~EACP~~;~~KACH~~;~~IAEO~~,~~YAAY~~;~~QAClB~~,OAAOA,kBAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,eAAW,MAAM,eAAW,QAAQ,GAAG,CAAC;KACjF;IAED,MAAM;~~QACJ~~,OAAO,IAAI,CAAC,~~GAAG~~,~~GAAG~~,IAAI,CAAC,aAAa,EAAE,~~GAAG~~,IAAI,CAAC,~~YAAY~~,EAAE,CAAC;~~KAC9D~~;;;;;;","names":["h"],"sources":["src/components/six-spinner/six-spinner.scss?tag=six-spinner&encapsulation=shadow","src/components/six-spinner/six-spinner.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/*\n @prop --track-color: The color of the spinner's track.\n * @prop --indicator-color: The color of the spinner's indicator.\n * @prop --stroke-width: The width of the indicator.\n /\n:host {\n --track-color: var(--six-progress-track-color);\n --indicator-color: var(--six-progress-indicator-color);\n --stroke-width: 2px;\n\n display: inline-flex;\n}\n\n.spinner {\n display: inline-block;\n width: 1em;\n height: 1em;\n border-radius: 50%;\n border: solid var(--stroke-width) var(--track-color);\n border-top-color: var(--indicator-color);\n border-right-color: var(--indicator-color);\n animation: 1s linear infinite spin;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n$color-six-spinner-background: rgba(255, 255, 255, 0.7);\n\n.six-spinner {\n width: auto;\n height: auto;\n position: relative;\n\n .six-spinner__container {\n margin: 0;\n transform: translateX(0);\n }\n\n .six-spinner__container svg {\n transform: translateX(0);\n }\n\n &__container {\n position: relative;\n margin: 0 auto;\n top: calc(50% - 20px);\n z-index: 1;\n }\n\n &__container,\n &__container svg {\n width: 40px;\n height: 40px;\n display: block;\n transform: translateX(40px);\n }\n\n path {\n stroke-dashoffset: 70px;\n stroke-dasharray: 70, 444;\n -webkit-animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n }\n\n @-webkit-keyframes six-spinner {\n to {\n stroke-dashoffset: -444;\n }\n }\n\n @keyframes six-spinner {\n to {\n stroke-dashoffset: -444;\n }\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @part base - The component's base wrapper.\n * @part svg - The spinner icon\n /\n@Component({\n tag: 'six-spinner',\n styleUrl: 'six-spinner.scss',\n shadow: true,\n})\nexport class SixSpinner {\n /* Indicates if the spinner is shown as animated SIX logo or simple spinner. */\n @Prop() six = ~~false~~;\n\n private ~~renderSIXLogo~~() {\n return (\n <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n <div class=\"six-spinner__container\">\n <svg viewBox=\"0 0 40 40\" part=\"svg\">\n <path\n fill=\"none\"\n stroke=\"#de3919\"\n stroke-width=\"5\"\n stroke-linecap=\"round\"\n d=\"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42\"\n ></path>\n </svg>\n ~~</div~~>\n </~~span~~>\n );\n }\n\n private ~~renderSimple~~() {\n return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n }\n\n render() {\n ~~return~~ this.six ? this.renderSIXLogo() : this.~~renderSimple~~();\n }\n}\n"],"version":3}
1	+ {"file":"six-spinner.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,m/DAAm/D,CAAC;AAC1gE,yBAAe,aAAa;;MCef,UAAU;;;;;;;;;IAab,aAAa,CAAC,OAAmB;QACvC,QACEA,kBAAM,KAAK,EAAC,aAAa,eAAW,MAAM,eAAW,QAAQ,IAC3DA,iBAAK,KAAK,EAAC,wBAAwB,IAAE,OAAO,CAAO,CAC9C,EACP;KACH;;;;IAKO,aAAa;QACnB,MAAM,OAAO,IACXA,iBAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,KAAK,IACjCA,kBACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,kBACH,GAAG,oBACD,OAAO,EACtB,CAAC,EAAC,mHAAmH,GAC/G,CACJ,CACP,CAAC;QACF,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;KACpC;;;;IAKO,aAAa;QACnB,MAAM,OAAO,IACXA,iBAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,KAAK,IACjCA,qBACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,OAAO,kBACD,GAAG,oBACD,OAAO,EACtB,MAAM,EAAC,6GAA6G,GACpH,EACFA,qBACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,OAAO,kBACD,GAAG,oBACD,OAAO,EACtB,MAAM,EAAC,4DAA4D,GACnE,EACFA,qBACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,OAAO,kBACD,GAAG,oBACD,OAAO,EACtB,MAAM,EAAC,yDAAyD,GAChE,CACE,CACP,CAAC;QACF,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;KACpC;;;;IAKO,mBAAmB;QACzB,OAAOA,kBAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,eAAW,MAAM,eAAW,QAAQ,GAAG,CAAC;KACjF;IAED,MAAM;;QAEJ,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,OAAO,CAAC,IAAI,CAAC,2DAA2D,CAAC,CAAC;YAC1E,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;SAC7B;QAED,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;YAC9B,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;YAC9B;gBACE,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;SACrC;KACF;;;;;;","names":["h"],"sources":["src/components/six-spinner/six-spinner.scss?tag=six-spinner&encapsulation=shadow","src/components/six-spinner/six-spinner.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/*\n @prop --track-color: The color of the spinner's track.\n * @prop --indicator-color: The color of the spinner's indicator.\n * @prop --stroke-width: The width of the indicator.\n /\n:host {\n --track-color: var(--six-progress-track-color);\n --indicator-color: var(--six-progress-indicator-color);\n --stroke-width: 2px;\n\n display: inline-flex;\n}\n\n.spinner {\n display: inline-block;\n width: 1em;\n height: 1em;\n border-radius: 50%;\n border: solid var(--stroke-width) var(--track-color);\n border-top-color: var(--indicator-color);\n border-right-color: var(--indicator-color);\n animation: 1s linear infinite spin;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n$color-six-spinner-background: rgba(255, 255, 255, 0.7);\n\n.six-spinner {\n width: auto;\n height: auto;\n position: relative;\n\n .six-spinner__container {\n margin: 0;\n transform: translateX(0);\n }\n\n .six-spinner__container svg {\n transform: translateX(0);\n }\n\n &__container {\n position: relative;\n margin: 0 auto;\n top: calc(50% - 20px);\n z-index: 1;\n }\n\n &__container,\n &__container svg {\n width: 40px;\n height: 40px;\n display: block;\n transform: translateX(40px);\n }\n\n path {\n stroke-dashoffset: 70px;\n stroke-dasharray: 70, 444;\n -webkit-animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n }\n\n polygon {\n stroke-dasharray: 310;\n stroke-dashoffset: 310;\n animation: big-polygon-draw 2s ease-in-out infinite;\n -webkit-animation: big-polygon-draw 2s ease-in-out infinite;\n }\n\n polygon:nth-child(2),\n polygon:nth-child(3) {\n stroke-dasharray: 110;\n stroke-dashoffset: 110;\n animation: small-polygon-draw 2s ease-in-out infinite;\n -webkit-animation: small-polygon-draw 2s ease-in-out infinite;\n }\n\n @keyframes big-polygon-draw {\n 0%,\n 100% {\n stroke-dashoffset: 310;\n }\n 50% {\n stroke-dashoffset: 140;\n }\n }\n\n @-webkit-keyframes big-polygon-draw {\n 0%,\n 100% {\n stroke-dashoffset: 310;\n }\n 50% {\n stroke-dashoffset: 140;\n }\n }\n\n @keyframes small-polygon-draw {\n 0%,\n 100% {\n stroke-dashoffset: 110;\n }\n 50% {\n stroke-dashoffset: 50;\n }\n }\n\n @-webkit-keyframes small-polygon-draw {\n 0%,\n 100% {\n stroke-dashoffset: 110;\n }\n 50% {\n stroke-dashoffset: 50;\n }\n }\n\n @-webkit-keyframes six-spinner {\n to {\n stroke-dashoffset: -444;\n }\n }\n\n @keyframes six-spinner {\n to {\n stroke-dashoffset: -444;\n }\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @part base - The component's base wrapper.\n * @part svg - The spinner icon.\n /\n@Component({\n tag: 'six-spinner',\n styleUrl: 'six-spinner.scss',\n shadow: true,\n})\nexport class SixSpinner {\n /* Indicates if the spinner is shown as animated SIX or BME logo or a simple spinner. /\n @Prop() logo?: 'six' \| 'bme';\n /\n @deprecated Use `logo=\"six\"` instead.\n \n If set to true, the spinner displays the SIX logo.\n /\n @Prop() six?: boolean;\n\n /\n Renders a container with a given SVG content.\n /\n private renderWrapper(content: SVGElement) {\n return (\n <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n <div class=\"six-spinner__container\">{content}</div>\n </span>\n );\n }\n\n /\n Renders the SIX logo spinner.\n /\n private renderSIXLogo() {\n const sixLogo = (\n <svg viewBox=\"0 0 40 40\" part=\"svg\">\n <path\n fill=\"none\"\n stroke=\"#de3919\"\n stroke-width=\"5\"\n stroke-linecap=\"round\"\n d=\"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42\"\n ></path>\n </svg>\n );\n return this.renderWrapper(sixLogo);\n }\n\n /\n Renders the BME logo spinner.\n /\n private renderBMELogo() {\n const bmeLogo = (\n <svg viewBox=\"0 0 45 55\" part=\"svg\">\n <polygon\n fill=\"none\"\n stroke=\"black\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n points=\"4.42 51.96 17.02 31.473 2 31.473 2 22.486 17.02 22.486 4.42 2 15.404 2 30.289 26.98 14.763 51.96 4.42 51.96\"\n />\n <polygon\n fill=\"none\"\n stroke=\"black\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n points=\"42 51.96 31.655 51.96 24.598 40.498 29.831 32.073 42 51.96\"\n />\n <polygon\n fill=\"none\"\n stroke=\"black\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n points=\"24.518 12.719 31.014 2 42 2 29.831 21.637 24.518 12.719\"\n />\n </svg>\n );\n return this.renderWrapper(bmeLogo);\n }\n\n /\n Renders a simple spinner.\n */\n private renderSimpleSpinner() {\n return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n }\n\n render() {\n // Check the deprecated `six` property first\n if (this.six) {\n console.warn('The \"six\" prop is deprecated. Use \"logo=\\'six\\'\" instead.');\n return this.renderSIXLogo();\n }\n\n switch (this.logo) {\n case 'six':\n return this.renderSIXLogo();\n case 'bme':\n return this.renderBMELogo();\n default:\n return this.renderSimpleSpinner();\n }\n }\n}\n"],"version":3}

package/dist/cjs/six-stage-indicator.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-d7748d51.js');
+const index = require('./index-417a06c8.js');
 const sixStageIndicatorCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:grid}.center-content{display:grid;align-self:center;justify-self:center;grid-gap:5px;grid-auto-flow:column}.align-item{margin:auto}.indicator,.indicator--acceptance,.indicator--etu,.indicator--dev,.indicator--itu{font-family:var(--six-font-family);font-size:14px;font-weight:var(--six-font-weight-bold);display:grid;align-content:center;width:100%;height:24px}.indicator--itu{background-color:var(--six-color-success-600);color:var(--six-color-web-rock-900)}.indicator--dev{background-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.indicator--etu{background-color:var(--six-color-action-600);color:var(--six-color-white)}.indicator--acceptance{background-color:var(--six-color-warning-800);color:var(--six-color-web-rock-900)}";
+const SixStageIndicatorStyle0 = sixStageIndicatorCss;
 const SixStageIndicator = class {
     constructor(hostRef) {
@@ -15,7 +16,7 @@ const SixStageIndicator = class {
         return this.stage == null || this.stage == 'PROD' ? null : (index.h("div", { class: `indicator--${this.stage.toLowerCase()}` }, index.h("div", { class: "center-content" }, index.h("six-icon", { class: "align-item", size: "small" }, "error_outline"), index.h("span", { class: 'align-item' }, index.h("slot", null)))));
     }
 };
-SixStageIndicator.style = sixStageIndicatorCss;
+SixStageIndicator.style = SixStageIndicatorStyle0;
 exports.six_stage_indicator = SixStageIndicator;

package/dist/cjs/six-stage-indicator.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-stage-indicator.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,oBAAoB,GAAG,k2BAAk2B;;~~MCSl3B~~,iBAAiB;;;qBAED,IAAI;;IAE/B,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI,IACtDA,iBAAK,KAAK,EAAE,cAAc,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,IAClDA,iBAAK,KAAK,EAAC,gBAAgB,IACzBA,sBAAU,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,oBAE9B,EACXA,kBAAM,KAAK,EAAE,YAAY,IACvBA,qBAAQ,CACH,CACH,CACF,CACP,CAAC;KACH;;;;;;","names":["h"],"sources":["src/components/six-stage-indicator/six-stage-indicator.scss?tag=six-stage-indicator&encapsulation=shadow","src/components/six-stage-indicator/six-stage-indicator.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: grid;\n}\n\n.center-content {\n display: grid;\n align-self: center;\n justify-self: center;\n grid-gap: 5px;\n grid-auto-flow: column;\n}\n\n.align-item {\n margin: auto;\n}\n\n.indicator {\n font-family: var(--six-font-family);\n font-size: 14px;\n font-weight: var(--six-font-weight-bold);\n display: grid;\n align-content: center;\n width: 100%;\n height: 24px;\n\n &--itu {\n @extend .indicator;\n background-color: var(--six-color-success-600);\n color: var(--six-color-web-rock-900);\n }\n\n &--dev {\n @extend .indicator;\n background-color: var(--six-color-web-rock-900);\n color: var(--six-color-white);\n }\n\n &--etu {\n @extend .indicator;\n background-color: var(--six-color-action-600);\n color: var(--six-color-white);\n }\n\n &--acceptance {\n @extend .indicator;\n background-color: var(--six-color-warning-800);\n color: var(--six-color-web-rock-900);\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nexport type StageType = 'DEV' \| 'ITU' \| 'ETU' \| 'ACCEPTANCE' \| 'PROD' \| null;\n\n@Component({\n tag: 'six-stage-indicator',\n styleUrl: 'six-stage-indicator.scss',\n shadow: true,\n})\nexport class SixStageIndicator {\n /** The indicators value attribute */\n @Prop() stage: StageType = null;\n\n render() {\n return this.stage == null \|\| this.stage == 'PROD' ? null : (\n <div class={`indicator--${this.stage.toLowerCase()}`}>\n <div class=\"center-content\">\n <six-icon class=\"align-item\" size=\"small\">\n error_outline\n </six-icon>\n <span class={'align-item'}>\n <slot />\n </span>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-stage-indicator.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,oBAAoB,GAAG,k2BAAk2B,CAAC;AACh4B,gCAAe,oBAAoB;;MCQtB,iBAAiB;;;qBAED,IAAI;;IAE/B,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI,IACtDA,iBAAK,KAAK,EAAE,cAAc,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,IAClDA,iBAAK,KAAK,EAAC,gBAAgB,IACzBA,sBAAU,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,oBAE9B,EACXA,kBAAM,KAAK,EAAE,YAAY,IACvBA,qBAAQ,CACH,CACH,CACF,CACP,CAAC;KACH;;;;;;","names":["h"],"sources":["src/components/six-stage-indicator/six-stage-indicator.scss?tag=six-stage-indicator&encapsulation=shadow","src/components/six-stage-indicator/six-stage-indicator.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: grid;\n}\n\n.center-content {\n display: grid;\n align-self: center;\n justify-self: center;\n grid-gap: 5px;\n grid-auto-flow: column;\n}\n\n.align-item {\n margin: auto;\n}\n\n.indicator {\n font-family: var(--six-font-family);\n font-size: 14px;\n font-weight: var(--six-font-weight-bold);\n display: grid;\n align-content: center;\n width: 100%;\n height: 24px;\n\n &--itu {\n @extend .indicator;\n background-color: var(--six-color-success-600);\n color: var(--six-color-web-rock-900);\n }\n\n &--dev {\n @extend .indicator;\n background-color: var(--six-color-web-rock-900);\n color: var(--six-color-white);\n }\n\n &--etu {\n @extend .indicator;\n background-color: var(--six-color-action-600);\n color: var(--six-color-white);\n }\n\n &--acceptance {\n @extend .indicator;\n background-color: var(--six-color-warning-800);\n color: var(--six-color-web-rock-900);\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nexport type StageType = 'DEV' \| 'ITU' \| 'ETU' \| 'ACCEPTANCE' \| 'PROD' \| null;\n\n@Component({\n tag: 'six-stage-indicator',\n styleUrl: 'six-stage-indicator.scss',\n shadow: true,\n})\nexport class SixStageIndicator {\n /** The indicators value attribute */\n @Prop() stage: StageType = null;\n\n render() {\n return this.stage == null \|\| this.stage == 'PROD' ? null : (\n <div class={`indicator--${this.stage.toLowerCase()}`}>\n <div class=\"center-content\">\n <six-icon class=\"align-item\" size=\"small\">\n error_outline\n </six-icon>\n <span class={'align-item'}>\n <slot />\n </span>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/six-switch.cjs.entry.js CHANGED Viewed

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-d7748d51.js');
+const index = require('./index-417a06c8.js');
 const eventListeners = require('./event-listeners-9fb878f1.js');
-const formControl = require('./form-control-8d64e974.js');
+const formControl = require('./form-control-b39f1df5.js');
 const slot = require('./slot-1b1232a1.js');
 const sixSwitchCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{--height:var(--six-selection-control-toggle-size);--thumb-size:calc(var(--six-selection-control-toggle-size) - 4px);--width:calc(var(--height) * 2);display:inline-block}.switch{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.switch__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--width);height:var(--height);background-color:var(--six-selection-control-color-disabled);border-radius:var(--height);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color}.switch__control .switch__thumb{width:var(--thumb-size);height:var(--thumb-size);background-color:var(--six-input-background-color);border-radius:50%;transform:translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));transition:var(--six-transition-fast) transform ease, var(--six-transition-fast) background-color, var(--six-transition-fast) border-color, var(--six-transition-fast) box-shadow}.switch__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-hover)}.switch--checked .switch__control{background-color:var(--six-selection-control-color)}.switch--checked .switch__control .switch__thumb{background-color:var(--six-color-white);transform:translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2))}.switch.switch--checked:not(.switch--disabled) .switch__control:hover{background-color:var(--six-input-border-color-focus)}.switch--disabled{cursor:not-allowed;color:var(--six-selection-control-color-disabled)}.switch--disabled .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch--disabled.switch--checked .switch__control{background-color:var(--six-selection-control-color-disabled)}.switch__label{line-height:var(--height);margin-left:0.5em;user-select:none}";
+const SixSwitchStyle0 = sixSwitchCss;
 let id = 0;
 const SixSwitch = class {
@@ -102,12 +103,12 @@ const SixSwitch = class {
         (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.blur();
     }
     render() {
-        return (index.h(formControl.FormControl, { inputId: this.switchId, label: this.label, labelId: this.labelId, hasLabelSlot: false, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, index.h("label", { part: "base", htmlFor: this.switchId, class: {
+        return (index.h(formControl.FormControl, { key: 'f8a02f4bc5a931384248896494c1ef398f88453c', inputId: this.switchId, label: this.label, labelId: this.labelId, hasLabelSlot: false, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, index.h("label", { key: 'b85db2bcbf379f0b7a885fa04041661f2abc8aeb', part: "base", htmlFor: this.switchId, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled,
                 'switch--focused': this.hasFocus,
-            }, onMouseDown: this.handleMouseDown }, index.h("span", { part: "control", class: "switch__control" }, index.h("span", { part: "thumb", class: "switch__thumb" }), index.h("input", { ref: (el) => (this.inputElement = el), id: this.switchId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown })), index.h("span", { part: "label", id: this.labelId, class: "switch__label" }, index.h("slot", null)))));
+            }, onMouseDown: this.handleMouseDown }, index.h("span", { key: '001e868504ac577acca8352ab992c001e56908fa', part: "control", class: "switch__control" }, index.h("span", { key: '99d6f8448b43533b0ca19988cfd8485f05bed512', part: "thumb", class: "switch__thumb" }), index.h("input", { key: '5d787df251a93a531fdf8dfaa141cf87006f2be8', ref: (el) => (this.inputElement = el), id: this.switchId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown })), index.h("span", { key: '480a7fbc5d25546ca734c11c8363a4b98d97f97e', part: "label", id: this.labelId, class: "switch__label" }, index.h("slot", { key: '322c296e95edd35593b74daf4864561760f1e22d' })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -116,7 +117,7 @@ const SixSwitch = class {
         "label": ["handleLabelChange"]
     }; }
 };
-SixSwitch.style = sixSwitchCss;
+SixSwitch.style = SixSwitchStyle0;
 exports.six_switch = SixSwitch;

package/dist/cjs/six-switch.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-switch.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,YAAY,GAAG,6mJAA6mJ;;ACMloJ,IAAI,EAAE,GAAG,CAAC,CAAC;MAsBE,SAAS;;;;;;QACZ,aAAQ,GAAG,UAAU,EAAE,EAAE,EAAE,CAAC;QAC5B,YAAO,GAAG,gBAAgB,EAAE,EAAE,CAAC;QAC/B,gBAAW,GAAG,oBAAoB,EAAE,EAAE,CAAC;QAGvC,mBAAc,GAAG,IAAIA,6BAAc,EAAE,CAAC;QAyEtC,qBAAgB,GAAG;YACzB,IAAI,CAAC,gBAAgB,GAAGC,YAAO,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;SAC1D,CAAC;QAcM,gBAAW,GAAG;YACpB,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;gBAC7B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;gBACzC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;aACnC;SACF,CAAC;QAEM,eAAU,GAAG;YACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACjC,CAAC;QAEM,gBAAW,GAAG;YACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;SACtB,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAoB;YAC3C,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;gBAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;gBACrB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;aACnC;YAED,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;gBAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACpB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;aACnC;SACF,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAiB;;;YAE1C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAAE,CAAC;SAC5B,CAAC;wBAxHkB,KAAK;gCACG,KAAK;oBAGlB,EAAE;qBAGD,IAAI;wBAGD,KAAK;wBAGL,KAAK;uBAG0B,KAAK;qBAGvC,EAAE;yBAGqB,EAAE;;uBAMN,KAAK;;IAExC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAGD,mBAAmB;QACjB,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;YAC7B,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;YACzC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;SAC1C;KACF;IAWD,iBAAiB;;QACf,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC5E,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,mBAAmB,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACtE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,iBAAiB,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAClE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,kBAAkB,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KACrE;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC/E,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;KACjC;IAID,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;;IAQD,MAAM,QAAQ,CAAC,OAAsB;;QACnC,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;KACnC;;IAID,MAAM,WAAW;;QACf,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,EAAE,CAAC;KAC3B;IAuCD,MAAM;QACJ,QACEC,QAACC,uBAAW,IACV,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,KAAK,EACnB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,OAAO,IAE1BD,mBACE,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,iBAAiB,EAAE,IAAI,CAAC,OAAO;gBAC/B,kBAAkB,EAAE,IAAI,CAAC,QAAQ;gBACjC,iBAAiB,EAAE,IAAI,CAAC,QAAQ;aACjC,EACD,WAAW,EAAE,IAAI,CAAC,eAAe,IAEjCA,kBAAM,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,iBAAiB,IAC1CA,kBAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,GAAG,EAE3CA,mBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,qBAC5B,IAAI,CAAC,OAAO,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,GAC7B,CACG,EAEPA,kBAAM,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,eAAe,IACxDA,qBAAQ,CACH,CACD,CACI,EACd;KACH;;;;;;;;;;;;","names":["EventListeners","hasSlot","h","FormControl"],"sources":["src/components/six-switch/six-switch.scss?tag=six-switch&encapsulation=shadow","src/components/six-switch/six-switch.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n/*\n @prop --width: The width of the switch.\n * @prop --height: The height of the switch.\n * @prop --thumb-size: The size of the thumb.\n /\n:host {\n --height: var(--six-selection-control-toggle-size);\n --thumb-size: calc(var(--six-selection-control-toggle-size) - 4px);\n --width: calc(var(--height) 2);\n\n display: inline-block;\n}\n\n.switch {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-input-font-size-medium);\n font-weight: var(--six-input-font-weight);\n color: var(--six-input-color);\n vertical-align: middle;\n cursor: pointer;\n}\n\n.switch__control {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--width);\n height: var(--height);\n background-color: var(--six-selection-control-color-disabled);\n border-radius: var(--height);\n transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color;\n\n .switch__thumb {\n width: var(--thumb-size);\n height: var(--thumb-size);\n background-color: var(--six-input-background-color);\n border-radius: 50%;\n transform: translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));\n transition: var(--six-transition-fast) transform ease, var(--six-transition-fast) background-color,\n var(--six-transition-fast) border-color, var(--six-transition-fast) box-shadow;\n }\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n}\n\n// Hover\n.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n background-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.switch--checked .switch__control {\n background-color: var(--six-selection-control-color);\n\n .switch__thumb {\n background-color: var(--six-color-white);\n transform: translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2));\n }\n}\n\n// Checked + hover\n.switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.switch--disabled {\n cursor: not-allowed;\n color: var(--six-selection-control-color-disabled);\n\n .switch__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n\n &.switch--checked .switch__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n}\n\n.switch__label {\n line-height: var(--height);\n margin-left: 0.5em;\n user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The switch's label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part control - The switch control.\n * @part thumb - The switch position indicator.\n * @part label - The switch label.\n /\n\n@Component({\n tag: 'six-switch',\n styleUrl: 'six-switch.scss',\n shadow: true,\n})\nexport class SixSwitch {\n private switchId = `switch-${++id}`;\n private labelId = `switch-label-${id}`;\n private errorTextId = `input-error-text-${id}`;\n\n private inputElement?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixSwitchElement;\n\n @State() hasFocus = false;\n @State() hasErrorTextSlot = false;\n\n /* The switch's name attribute. /\n @Prop() name = '';\n\n /* The switch's value attribute. /\n @Prop() value = 'on';\n\n /* Set to true to disable the switch. /\n @Prop() disabled = false;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* Set to true to draw the switch in a checked state. /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n @Watch('checked')\n handleCheckedChange() {\n if (this.inputElement != null) {\n this.inputElement.checked = this.checked;\n this.checked = this.inputElement.checked;\n }\n }\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-switch-blur' }) sixBlur!: EventEmitter<boolean>;\n\n /* Emitted when the control's checked state changes. /\n @Event({ eventName: 'six-switch-change' }) sixChange!: EventEmitter<boolean>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-switch-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-switch-change', 'change', this.host);\n this.eventListeners.forward('six-switch-blur', 'blur', this.host);\n this.eventListeners.forward('six-switch-focus', 'focus', this.host);\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n private handleSlotChange = () => {\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n /* Sets focus on the switch. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.inputElement?.focus(options);\n }\n\n /* Removes focus from the switch. */\n @Method()\n async removeFocus() {\n this.inputElement?.blur();\n }\n\n private handleClick = () => {\n if (this.inputElement != null) {\n this.checked = this.inputElement.checked;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit(this.checked);\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n this.checked = false;\n this.sixChange.emit(this.checked);\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n this.checked = true;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.inputElement?.focus();\n };\n\n render() {\n return (\n <FormControl\n inputId={this.switchId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={false}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size=\"medium\"\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <label\n part=\"base\"\n htmlFor={this.switchId}\n class={{\n switch: true,\n 'switch--checked': this.checked,\n 'switch--disabled': this.disabled,\n 'switch--focused': this.hasFocus,\n }}\n onMouseDown={this.handleMouseDown}\n >\n <span part=\"control\" class=\"switch__control\">\n <span part=\"thumb\" class=\"switch__thumb\" />\n\n <input\n ref={(el) => (this.inputElement = el)}\n id={this.switchId}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n role=\"switch\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onClick={this.handleClick}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n />\n </span>\n\n <span part=\"label\" id={this.labelId} class=\"switch__label\">\n <slot />\n </span>\n </label>\n </FormControl>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-switch.entry.cjs.js","mappings":"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","names":["EventListeners","hasSlot","h","FormControl"],"sources":["src/components/six-switch/six-switch.scss?tag=six-switch&encapsulation=shadow","src/components/six-switch/six-switch.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n/*\n @prop --width: The width of the switch.\n * @prop --height: The height of the switch.\n * @prop --thumb-size: The size of the thumb.\n /\n:host {\n --height: var(--six-selection-control-toggle-size);\n --thumb-size: calc(var(--six-selection-control-toggle-size) - 4px);\n --width: calc(var(--height) 2);\n\n display: inline-block;\n}\n\n.switch {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-input-font-size-medium);\n font-weight: var(--six-input-font-weight);\n color: var(--six-input-color);\n vertical-align: middle;\n cursor: pointer;\n}\n\n.switch__control {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--width);\n height: var(--height);\n background-color: var(--six-selection-control-color-disabled);\n border-radius: var(--height);\n transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color;\n\n .switch__thumb {\n width: var(--thumb-size);\n height: var(--thumb-size);\n background-color: var(--six-input-background-color);\n border-radius: 50%;\n transform: translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));\n transition: var(--six-transition-fast) transform ease, var(--six-transition-fast) background-color,\n var(--six-transition-fast) border-color, var(--six-transition-fast) box-shadow;\n }\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n}\n\n// Hover\n.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n background-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.switch--checked .switch__control {\n background-color: var(--six-selection-control-color);\n\n .switch__thumb {\n background-color: var(--six-color-white);\n transform: translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2));\n }\n}\n\n// Checked + hover\n.switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.switch--disabled {\n cursor: not-allowed;\n color: var(--six-selection-control-color-disabled);\n\n .switch__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n\n &.switch--checked .switch__control {\n background-color: var(--six-selection-control-color-disabled);\n }\n}\n\n.switch__label {\n line-height: var(--height);\n margin-left: 0.5em;\n user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The switch's label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part control - The switch control.\n * @part thumb - The switch position indicator.\n * @part label - The switch label.\n /\n\n@Component({\n tag: 'six-switch',\n styleUrl: 'six-switch.scss',\n shadow: true,\n})\nexport class SixSwitch {\n private switchId = `switch-${++id}`;\n private labelId = `switch-label-${id}`;\n private errorTextId = `input-error-text-${id}`;\n\n private inputElement?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixSwitchElement;\n\n @State() hasFocus = false;\n @State() hasErrorTextSlot = false;\n\n /* The switch's name attribute. /\n @Prop() name = '';\n\n /* The switch's value attribute. /\n @Prop() value = 'on';\n\n /* Set to true to disable the switch. /\n @Prop() disabled = false;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* Set to true to draw the switch in a checked state. /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n @Watch('checked')\n handleCheckedChange() {\n if (this.inputElement != null) {\n this.inputElement.checked = this.checked;\n this.checked = this.inputElement.checked;\n }\n }\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-switch-blur' }) sixBlur!: EventEmitter<boolean>;\n\n /* Emitted when the control's checked state changes. /\n @Event({ eventName: 'six-switch-change' }) sixChange!: EventEmitter<boolean>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-switch-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-switch-change', 'change', this.host);\n this.eventListeners.forward('six-switch-blur', 'blur', this.host);\n this.eventListeners.forward('six-switch-focus', 'focus', this.host);\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n private handleSlotChange = () => {\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n /* Sets focus on the switch. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.inputElement?.focus(options);\n }\n\n /* Removes focus from the switch. */\n @Method()\n async removeFocus() {\n this.inputElement?.blur();\n }\n\n private handleClick = () => {\n if (this.inputElement != null) {\n this.checked = this.inputElement.checked;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit(this.checked);\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n this.checked = false;\n this.sixChange.emit(this.checked);\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n this.checked = true;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.inputElement?.focus();\n };\n\n render() {\n return (\n <FormControl\n inputId={this.switchId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={false}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size=\"medium\"\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <label\n part=\"base\"\n htmlFor={this.switchId}\n class={{\n switch: true,\n 'switch--checked': this.checked,\n 'switch--disabled': this.disabled,\n 'switch--focused': this.hasFocus,\n }}\n onMouseDown={this.handleMouseDown}\n >\n <span part=\"control\" class=\"switch__control\">\n <span part=\"thumb\" class=\"switch__thumb\" />\n\n <input\n ref={(el) => (this.inputElement = el)}\n id={this.switchId}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n role=\"switch\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onClick={this.handleClick}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n />\n </span>\n\n <span part=\"label\" id={this.labelId} class=\"switch__label\">\n <slot />\n </span>\n </label>\n </FormControl>\n );\n }\n}\n"],"version":3}