@api-client/ui 0.5.26 → 0.5.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/src/elements/navigation/internals/NavigationItem.js +1 -1
- package/build/src/elements/navigation/internals/NavigationItem.js.map +1 -1
- package/demo/elements/navigation/navigation-item.html +4 -0
- package/demo/elements/navigation/navigation-item.ts +19 -0
- package/package.json +1 -1
- package/src/elements/navigation/internals/NavigationItem.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationItem.js","sourceRoot":"","sources":["../../../../../src/elements/navigation/internals/NavigationItem.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;;sBAER,SAAS;;;;;;;;;;;;;iBAAhC,cAAe,SAAQ,WAAS;;;oCAUlD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCAM1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCAM1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mCAK1C,KAAK,EAAE;YAjBoC,6KAAS,QAAQ,6BAAR,QAAQ,2FAAQ;YAMzB,6KAAS,QAAQ,6BAAR,QAAQ,2FAAQ;YAMzB,6KAAS,QAAQ,6BAAR,QAAQ,2FAAQ;YAK5D,0KAAmB,OAAO,6BAAP,OAAO,yFAAQ;;;QA1B3C,MAAM,CAAU,iBAAiB,GAAmB;YAClD,IAAI,EAAE,MAAM;YACZ,cAAc,EAAE,IAAI;SACrB,CAAA;QAM2C,6EAAoB,KAAK;QAErE;;;WAGG;UALkE;QAJrE;;;WAGG;QACyC,IAAS,QAAQ,8CAAQ;QAAzB,IAAS,QAAQ,oDAAQ;QAMzB,oIAAoB,KAAK;QACrE;;;;WAIG;WALkE;QAJrE;;;WAGG;QACyC,IAAS,QAAQ,8CAAQ;QAAzB,IAAS,QAAQ,oDAAQ;QAMzB,oIAAoB,KAAK;QAErE;;WAEG;WAJkE;QALrE;;;;WAIG;QACyC,IAAS,QAAQ,8CAAQ;QAAzB,IAAS,QAAQ,oDAAQ;QAK5D,kIAA6B,KAAK;QAE3C;;WAEG;WAJwC;QAH3C;;WAEG;QACM,IAAmB,OAAO,6CAAQ;QAAlC,IAAmB,OAAO,mDAAQ;QAE3C;;WAEG;QACO,oBAAoB,CAAC,CAAQ;YACrC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAA;YACxC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAA;QAC9C,CAAC;QAEkB,MAAM;YACvB,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,IAAI,CAAA;YAChC,MAAM,gBAAgB,GAAG,QAAQ,CAAC;gBAChC,QAAQ,EAAE,IAAI;gBACd,
|
|
1
|
+
{"version":3,"file":"NavigationItem.js","sourceRoot":"","sources":["../../../../../src/elements/navigation/internals/NavigationItem.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;;sBAER,SAAS;;;;;;;;;;;;;iBAAhC,cAAe,SAAQ,WAAS;;;oCAUlD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCAM1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCAM1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mCAK1C,KAAK,EAAE;YAjBoC,6KAAS,QAAQ,6BAAR,QAAQ,2FAAQ;YAMzB,6KAAS,QAAQ,6BAAR,QAAQ,2FAAQ;YAMzB,6KAAS,QAAQ,6BAAR,QAAQ,2FAAQ;YAK5D,0KAAmB,OAAO,6BAAP,OAAO,yFAAQ;;;QA1B3C,MAAM,CAAU,iBAAiB,GAAmB;YAClD,IAAI,EAAE,MAAM;YACZ,cAAc,EAAE,IAAI;SACrB,CAAA;QAM2C,6EAAoB,KAAK;QAErE;;;WAGG;UALkE;QAJrE;;;WAGG;QACyC,IAAS,QAAQ,8CAAQ;QAAzB,IAAS,QAAQ,oDAAQ;QAMzB,oIAAoB,KAAK;QACrE;;;;WAIG;WALkE;QAJrE;;;WAGG;QACyC,IAAS,QAAQ,8CAAQ;QAAzB,IAAS,QAAQ,oDAAQ;QAMzB,oIAAoB,KAAK;QAErE;;WAEG;WAJkE;QALrE;;;;WAIG;QACyC,IAAS,QAAQ,8CAAQ;QAAzB,IAAS,QAAQ,oDAAQ;QAK5D,kIAA6B,KAAK;QAE3C;;WAEG;WAJwC;QAH3C;;WAEG;QACM,IAAmB,OAAO,6CAAQ;QAAlC,IAAmB,OAAO,mDAAQ;QAE3C;;WAEG;QACO,oBAAoB,CAAC,CAAQ;YACrC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAA;YACxC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAA;QAC9C,CAAC;QAEkB,MAAM;YACvB,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,IAAI,CAAA;YAChC,MAAM,gBAAgB,GAAG,QAAQ,CAAC;gBAChC,QAAQ,EAAE,IAAI;gBACd,WAAW,EAAE,IAAI,CAAC,OAAO;gBACzB,SAAS,EAAE,OAAO;gBAClB,WAAW,EAAE,IAAI,CAAC,QAAQ;aAC3B,CAAC,CAAA;YACF,OAAO,IAAI,CAAA;uBACQ,gBAAgB;;;UAG7B,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe;;KAEjE,CAAA;QACH,CAAC;QAES,UAAU;YAClB,OAAO,IAAI,CAAA;wCACyB,IAAI,CAAC,oBAAoB;aACpD,CAAA;QACX,CAAC;;;;;;;AA1DH","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../../md/UiElement.js'\n\nexport default class NavigationItem extends UiElement {\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n }\n\n /**\n * When set, the button is a disabled state.\n * @attribute\n */\n @property({ reflect: true, type: Boolean }) accessor disabled = false\n\n /**\n * Whether the navigation item is selected.\n * @attribute\n */\n @property({ reflect: true, type: Boolean }) accessor selected = false\n /**\n * When set, the navigation item is rendered as an icon-only button.\n * The width of the button is set to 40px.\n * @attribute\n */\n @property({ reflect: true, type: Boolean }) accessor iconOnly = false\n\n /**\n * Determines when the element has an icon in the \"icon\" slot.\n */\n @state() protected accessor hasIcon = false\n\n /**\n * Sets the `_hasIcon` state property when the \"icon\" slot change event is dispatched.\n */\n protected handleIconSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement\n this.hasIcon = !!slot.assignedNodes().length\n }\n\n protected override render(): TemplateResult {\n const { pressed = false } = this\n const containerClasses = classMap({\n 'button': true,\n 'with-icon': this.hasIcon,\n 'pressed': pressed,\n 'icon-only': this.iconOnly,\n })\n return html`\n <button class=\"${containerClasses}\" id=\"button\">\n <md-focus-ring part=\"focus-ring\" for=\"button\"></md-focus-ring>\n <md-ripple></md-ripple>\n ${this.renderIcon()}${this.iconOnly ? '' : html`<slot></slot>`}\n </button>\n `\n }\n\n protected renderIcon(): TemplateResult {\n return html`<span role=\"presentation\" class=\"icon\"\n ><slot name=\"icon\" @slotchange=\"${this.handleIconSlotChange}\"></slot\n ></span>`\n }\n}\n"]}
|
|
@@ -102,6 +102,25 @@ class ComponentDemoPage extends DemoPage {
|
|
|
102
102
|
<ui-icon slot="icon">drafts</ui-icon>
|
|
103
103
|
</ui-navigation-item>
|
|
104
104
|
</div>
|
|
105
|
+
|
|
106
|
+
<div class="nav-rail wide">
|
|
107
|
+
<ui-navigation-item selected>
|
|
108
|
+
<ui-icon slot="icon">inbox</ui-icon>
|
|
109
|
+
Inbox
|
|
110
|
+
</ui-navigation-item>
|
|
111
|
+
<ui-navigation-item>
|
|
112
|
+
<ui-icon slot="icon">star</ui-icon>
|
|
113
|
+
Starred
|
|
114
|
+
</ui-navigation-item>
|
|
115
|
+
<ui-navigation-item>
|
|
116
|
+
<ui-icon slot="icon">send</ui-icon>
|
|
117
|
+
Sent
|
|
118
|
+
</ui-navigation-item>
|
|
119
|
+
<ui-navigation-item disabled>
|
|
120
|
+
<ui-icon slot="icon">drafts</ui-icon>
|
|
121
|
+
Drafts
|
|
122
|
+
</ui-navigation-item>
|
|
123
|
+
</div>
|
|
105
124
|
</div>
|
|
106
125
|
</section>
|
|
107
126
|
`
|
package/package.json
CHANGED
|
@@ -44,7 +44,7 @@ export default class NavigationItem extends UiElement {
|
|
|
44
44
|
const { pressed = false } = this
|
|
45
45
|
const containerClasses = classMap({
|
|
46
46
|
'button': true,
|
|
47
|
-
'icon': this.hasIcon,
|
|
47
|
+
'with-icon': this.hasIcon,
|
|
48
48
|
'pressed': pressed,
|
|
49
49
|
'icon-only': this.iconOnly,
|
|
50
50
|
})
|