Avoid overloaded ID params; update test config

.github/workflows/ci.yml

@@ -63,7 +63,7 @@ jobs:
           - ember-beta
           - ember-canary
           - embroider-safe
-          - embroider-optimized
+#          - embroider-optimized
 
     steps:
       - uses: actions/checkout@v4

README.md

@@ -34,7 +34,7 @@ ember install ember-bootstrap-time-input-group
 
 To use the component, insert this in your template:
 
-    <TimeInputGroup @id='my_element_id_base' @value={{my_value}} @minHour={{my_min}} @maxHour={{my_max}} @saveAction={{my_save_action}} /> 
+    <TimeInputGroup @baseElementId='my_element_id_base' @value={{my_value}} @minHour={{my_min}} @maxHour={{my_max}} @saveAction={{my_save_action}} /> 
 
 ## Contributing
 

addon/components/time-input-group.js

@@ -3,6 +3,7 @@ import Component from '@ember/component';
 
 export default Component.extend({
   classNames: ['time-input-group', 'form-inline'],
+  attributeBindings: ['baseElementId:id'],
 
   actions: {
     hourInputChanged(target) {
@@ -13,12 +14,12 @@ export default Component.extend({
     }
   },
 
-  hourElementId: computed('id', function() {
-    return this.id + '-hour';
+  hourElementId: computed('baseElementId', function() {
+    return this.baseElementId + '-hour';
   }),
 
-  minuteElementId: computed('id', function() {
-    return this.id + '-minute';
+  minuteElementId: computed('baseElementId', function() {
+    return this.baseElementId + '-minute';
   }),
 
   meridian: computed('hour', function() {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-bootstrap-time-input-group",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A component with a time input for forms.",
   "keywords": [
     "ember-addon"

tests/dummy/config/environment.js

@@ -17,7 +17,7 @@ module.exports = function (environment) {
     APP: {
       // Here you can pass flags/options to your application instance
       // when it is created
-    },
+    }
   };
 
   if (environment === 'development') {

tests/integration/components/time-input-group-test.js

@@ -11,7 +11,7 @@ module('Integration | Component | time-input-group', function (hooks) {
   });
 
   test('it renders', async function (assert) {
-    await render(hbs`<TimeInputGroup @id='time-machine' @value={{this.time}} @minHour={{5}} @maxHour={{20}} />`);
+    await render(hbs`<TimeInputGroup @baseElementId='time-machine' @id='red-herring' @value={{this.time}} @minHour={{5}} @maxHour={{20}} />`);
 
     let hourInput = find('.time-input-group-hour');
     assert.strictEqual(hourInput.id, 'time-machine-hour', 'it has correct id');
@@ -34,7 +34,7 @@ module('Integration | Component | time-input-group', function (hooks) {
   test ('it renders (morning time)', async function (assert) {
     this.time.setUTCHours(0);
 
-    await render(hbs`<TimeInputGroup @id='time-machine' @value={{this.time}} @minHour={{5}} @maxHour={{20}} />`);
+    await render(hbs`<TimeInputGroup @baseElementId='time-machine' @value={{this.time}} @minHour={{5}} @maxHour={{20}} />`);
 
     assert.strictEqual(find('.time-input-group-meridian').textContent, 'am');
   });

tests/unit/components/time-input-group-test.js

@@ -7,7 +7,7 @@ module('Unit | Component | time-input-group', function (hooks) {
   hooks.beforeEach(function() {
     this.component = this.owner.factoryFor('component:time-input-group').create({
       value: new Date(Date.UTC(2015,3,10,12,40,0)),
-      id: 'time-machine'
+      baseElementId: 'time-machine'
     });
   });