diff --git a/components/d2l-navigation-iterator/d2l-navigation-iterator-item.js b/components/d2l-navigation-iterator/d2l-navigation-iterator-item.js
deleted file mode 100644
index f513072f..00000000
--- a/components/d2l-navigation-iterator/d2l-navigation-iterator-item.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { LocalizeNavigationElement } from '../localize-navigation-element.js';
-import '@brightspace-ui/core/components/colors/colors.js';
-import '@brightspace-ui/core/components/icons/icon.js';
-import '@brightspace-ui/core/components/tooltip/tooltip.js';
-import '../../d2l-navigation-button.js';
-
-class NavigationIteratorItem extends LocalizeNavigationElement(LitElement) {
-
- static get properties() {
- return {
- disabled: {
- type: Boolean,
- reflect: true
- },
- hideText: {
- type: Boolean,
- attribute: 'hide-text',
- reflect: true
- },
- text: {
- type: String
- },
- type: {
- type: String,
- reflect: true
- }
- };
- }
-
- static get styles() {
- return css`
- :host {
- display: flex;
- height: 100%;
- position: relative;
- }
- :host([disabled]) {
- color: var(--d2l-color-ferrite);
- cursor: auto;
- opacity: 0.5;
- text-decoration: none;
- }
- :host([disabled]) d2l-tooltip {
- display: none;
- }
- :host([type="previous"]) d2l-navigation-button {
- padding-left: 1.2rem;
- }
- :host([type="next"]) d2l-navigation-button {
- padding-right: 1.5rem;
- }
- :host([type="previous"]:dir(rtl)) d2l-navigation-button {
- padding-left: 0;
- padding-right: 1.2rem;
- }
- :host([type="next"]:dir(rtl)) d2l-navigation-button {
- padding-left: 1.5rem;
- padding-right: 0;
- }
- .d2l-navigation-iterator-item-items {
- align-items: center;
- display: flex;
- height: 100%;
- }
- :host([type="next"]) .d2l-navigation-iterator-item-items {
- flex-direction: row-reverse;
- }
- :host([type="previous"]) .d2l-navigation-iterator-item-text {
- padding-left: 0.6rem;
- }
- :host([type="next"]) .d2l-navigation-iterator-item-text {
- padding-right: 0.6rem;
- }
- :host([type="previous"]:dir(rtl)) .d2l-navigation-iterator-item-text {
- padding-left: 0;
- padding-right: 0.6rem;
- }
- :host([type="next"]:dir(rtl)) .d2l-navigation-iterator-item-text {
- padding-left: 0.6rem;
- padding-right: 0;
- }
- `;
- }
-
- constructor() {
- super();
- this.disabled = false;
- this.hideText = false;
- this.text = '';
- this.type = 'previous';
- }
-
- render() {
- const icon = (this.type === 'previous') ? 'tier3:chevron-left-circle' : 'tier3:chevron-right-circle';
- const text = this._computeText();
- return html`
-
-
-
- ${text}
-
-
- ${text}
- `;
- }
-
- _computeText() {
- if (this.text.length > 0) {
- return this.text;
- }
- return (this.type === 'previous') ? this.localize('previous') : this.localize('next');
- }
-
-}
-
-customElements.define('d2l-navigation-iterator-item', NavigationIteratorItem);
diff --git a/components/d2l-navigation-iterator/d2l-navigation-iterator.js b/components/d2l-navigation-iterator/d2l-navigation-iterator.js
index 8c7cda4c..43ee8948 100644
--- a/components/d2l-navigation-iterator/d2l-navigation-iterator.js
+++ b/components/d2l-navigation-iterator/d2l-navigation-iterator.js
@@ -1,67 +1,63 @@
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import '@brightspace-ui/typography/d2l-typography-shared-styles.js';
-import './d2l-navigation-iterator-item.js';
+import { css, html, LitElement } from 'lit';
+import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/styles.js';
+import { LocalizeNavigationElement } from '../localize-navigation-element.js';
+import '../../d2l-navigation-button-icon.js';
-/**
- * @customElement
- * @polymer
- */
-class D2LNavigationIterator extends PolymerElement {
- static get is() { return 'd2l-navigation-iterator'; }
+class NavigationIterator extends LocalizeNavigationElement(LitElement) {
static get properties() {
return {
- previousText: {
- type: String
- },
- nextText: {
- type: String
- },
- hideText: {
- type: Boolean,
- value: false
- },
- previousDisabled: {
- type: Boolean,
- value: false
- },
- nextDisabled: {
- type: Boolean,
- value: false
- }
+ hideText: { attribute: 'hide-text', type: Boolean },
+ previousDisabled: { attribute: 'previous-disabled', type: Boolean },
+ previousText: { attribute: 'previous-text', type: String },
+ nextDisabled: { attribute: 'next-disabled', type: Boolean },
+ nextText: { attribute: 'next-text', type: String },
};
}
- static get template() {
+ static get styles() {
+ return [bodyCompactStyles, css`
+ .wrapper {
+ align-items: center;
+ display: flex;
+ height: 3.3rem;
+ justify-content: space-between;
+ max-width: 20rem;
+ padding: 0 1.2rem;
+ }
+ `];
+ }
+
+ constructor() {
+ super();
+ this.hideText = false;
+ this.nextDisabled = false;
+ this.nextText = '';
+ this.previousDisabled = false;
+ this.previousText = '';
+ }
+
+ render() {
+ const previousText = this.previousText ? this.previousText : this.localize('previous');
+ const nextText = this.nextText ? this.nextText : this.localize('next');
return html`
-
-
-
-
+
+
+
+
+
`;
}
@@ -95,4 +91,4 @@ class D2LNavigationIterator extends PolymerElement {
}
-window.customElements.define('d2l-navigation-iterator', D2LNavigationIterator);
+window.customElements.define('d2l-navigation-iterator', NavigationIterator);
diff --git a/d2l-navigation-button-icon.js b/d2l-navigation-button-icon.js
index d8746fa8..1a5248c0 100644
--- a/d2l-navigation-button-icon.js
+++ b/d2l-navigation-button-icon.js
@@ -24,6 +24,11 @@ class NavigationButtonIcon extends FocusMixin(LitElement) {
* @type {string}
*/
icon: { type: String },
+ /**
+ * Position of the icon.
+ * @type {'start'|'end'}
+ */
+ iconPosition: { attribute: 'icon-position', type: String },
/**
* REQUIRED: Text for the button
* @type {string}
@@ -52,8 +57,10 @@ class NavigationButtonIcon extends FocusMixin(LitElement) {
border: none;
color: var(--d2l-color-ferrite);
cursor: pointer;
+ display: inline-flex;
font-family: inherit;
font-size: inherit;
+ gap: 6px;
height: 100%;
margin: 0;
min-height: 40px;
@@ -61,6 +68,7 @@ class NavigationButtonIcon extends FocusMixin(LitElement) {
overflow: visible;
padding: 0;
position: relative;
+ vertical-align: middle;
white-space: nowrap;
}
/* Firefox includes a hidden border which messes up button dimensions */
@@ -83,6 +91,7 @@ class NavigationButtonIcon extends FocusMixin(LitElement) {
constructor() {
super();
this.disabled = false;
+ this.iconPosition = 'start';
this.textHidden = false;
this._buttonId = getUniqueId();
}
@@ -94,11 +103,13 @@ class NavigationButtonIcon extends FocusMixin(LitElement) {
render() {
const { ariaLabel, id, text, tooltip } = this._getRenderSettings();
const highlightBorder = !this.disabled ? html`` : nothing;
+ const icon = html``;
return html`
${tooltip}
`;
diff --git a/demo/iterator.html b/demo/iterator.html
index d6c73138..4477dbae 100644
--- a/demo/iterator.html
+++ b/demo/iterator.html
@@ -21,14 +21,7 @@ Empty
Count (hide text)
- User 1 of 17
-
-
-
- Separator (hide text)
-
-
-
+ User 1 of 17
@@ -37,14 +30,9 @@ Custom Labels
- Next Disabled
-
-
-
-
- Previous Disabled
+ Disabled
-
+
diff --git a/package.json b/package.json
index d76095a9..aece2fc8 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
"scripts": {
"lint": "npm run lint:eslint && npm run lint:lit && npm run lint:style",
"lint:eslint": "eslint . --ext .js,.html",
- "lint:lit": "lit-analyzer d2l-navigation.js d2l-navigation-separator.js ./components/d2l-navigation-iterator/d2l-navigation-iterator-item.js --strict --rules.no-unknown-tag-name off",
+ "lint:lit": "lit-analyzer d2l-navigation.js d2l-navigation-separator.js ./components/d2l-navigation-iterator/d2l-navigation-iterator.js --strict --rules.no-unknown-tag-name off",
"lint:style": "stylelint \"**/*.{js,html}\"",
"start": "web-dev-server --node-resolve --watch --open --app-index demo/index.html",
"test": "npm run lint && npm run test:headless",
diff --git a/test/button.visual-diff.html b/test/button.visual-diff.html
index a23b74bb..0809d8d4 100644
--- a/test/button.visual-diff.html
+++ b/test/button.visual-diff.html
@@ -28,6 +28,9 @@