# Source: ui/segment.reel/segment.js

    /**
     * @module "ui/segmented-bar.reel/segment.reel"
     * @requires montage/ui/component
     */
    var Component = require("ui/component").Component;

    /**
     * @class Segment
     *
     * A `Segment` to be used inside a {@link SegmentedBar}.
     * Each `Segment`'s `length` is a percentage of the entire `SegmentedBar`. Can optional have a `label`.
     *
     * @extends Component
     */
    exports.Segment = Component.specialize( /** @lends Segment.prototype */ {
        /**
         * @private
         */
        _label: {value: null},

        /**
         * Text label for each `Segment`. Bound to `Text` component in template.
         *
         * @property {String} label - optional
         */
        label: {
            get: function () {
                return this._label;
            },
            set: function (label) {
                if (label !== this._label) {
                    this._label = label;
                    this.needsDraw = true;
                }
            }
        },

        /**
         * @private
         */
        _length: {value: null},

        /**
         * Used to draw `Segment` length using Flexbox.
         *
         * @property {Number} newData.length
         */
        length: {
            get: function () {
                return this._length;
            },
            set: function (length) {
                if (length !== this._length) {
                    this._length = length;
                    this.needsDraw = true;
                }
            }
        },

        /**
         * Redraw based on updated length.
         *
         * @function
         */
        draw: {
            value: function () {
                if (this.length) {
                    // Autoprefixer > 1%, last 2 versions, Firefox ESR, Opera 12.1
                    this.element.style.webkitBoxFlex = this.length;
                    this.element.style.webkitFlex = this.length;
                    this.element.style.msFlex = this.length;
                    this.element.style.flex = this.length;
                }
            }
        }
    });