Icon configuration

[hornetnz]

Using v0.7.0

I'm attempting to set the icons global, but it doesn't seem to be working. I'm sure I'm missing something stupid, but haven't found many examples to go by...

module.exports = function (environment) {
    let ENV = {
        modulePrefix: 'web-directory',
        environment,
        rootURL: '/',
        locationType: 'hash',
        EmberENV: {
            MODEL_FACTORY_INJECTIONS: true,
            FEATURES: {
            }
        },

        APP: {
            version: pkg.version,
            semver: pkg.version + '-edge',
            urlprefix: '',
            buildNumber: process.env.BUILD_NUMBER || 'BUILDNUM',
            libs: buildLibraryVersions()
        },

        'ember-cli-bootstrap-datetimepicker': {
            icons: {
                date: 'fa fa-calendar-alt',
                next: 'fa fa-chevron-right',
                previous: 'fa fa-chevron-left'
            }
        },

I can see the icons object when I do require('web-directory/config/environment') from the Chrome Inspector console...but when I step into the breakpoint at date: this.getWithDefault('config.icons.date', defaults.icons.date),, there's nothing at root.config.

I'm not sure if it makes a difference, but the environment config file is on my parent app, while the datetimepicker component is in an addon being used by one of the engines inside the parent app. It's clear that the datetimepicker code is being loaded, but for some reason it seems that its not loading, or not finding, the env variables?

[btecu]

By default you don't have access to ENV in addons. Can you console log in your component init the ENV to see check if you actually have access?

[hornetnz]

Yeah Im not seeing it. Would a import ENV from 'application-name/config/environment'; on the component work in this case?

[btecu]

No, I doubt it. It's not exposed by default if you're using the addon folder - which is the preferred way.

One way is to move your addon code to the app folder - you now have full access to the ENV. Another way is to inject it into the component, similar to how this addon is doing it: https://github.com/btecu/ember-cli-bootstrap-datetimepicker/blob/master/app/components/bs-datetimepicker.js

[hornetnz]

I added the import/inject to the component...

import DateTimePicker from '../datetimepicker';
import layout from './template';
import ENV from 'web-directory/config/environment';

export default DateTimePicker.extend({
    layout,
    config: ENV['ember-cli-bootstrap-datetimepicker'],

    didReceiveAttrs() {
        this._super(...arguments);
        const fieldKey = this.get('control.key');
    }
});

At my breakpoint in the didReceive, I can see my icon settings...

But still when going into the getWithDefault, it doesn't look like config is on this...

The attributes on this are: date, format, locale and openOnFocus.