Oracle JET Base FIddle

v13.0.1 base fiddle using CDN [Forked from https://jsfiddle.net/asefkow/fjbmxazn/]

by marbx

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
<div id='container'>
  <oj-label for="width1">validator-hint="none"</oj-label>
  <oj-input-number id="width1" value="{{width}}" min="0"  user-assistance-density="compact" display-options.validator-hint="none"></oj-input-number>
  <br/>
  <br/>
  <oj-label for="width2">validator-hint="display"</oj-label>
  <oj-input-number id="width2" value="{{width}}" min="0" user-assistance-density="compact" validator-hint="display"></oj-input-number>
  <br/>
  <br/>
  <oj-label for="width1">validator-hint="none", not compact</oj-label>
  <oj-input-number id="width1" value="{{width}}" min="0" display-options.validator-hint="none"></oj-input-number>


</div>

CSS

/**
The default theme for JET is based on Oracle's Redwood Design System.  
Theming is provided via CSS Variables. A Theme Builder application to help build custom themes is available from the Learning/Dive-in page of the JET website.
**/

@import url('//static.oracle.com/cdn/jet/13.0.1/default/css/redwood/oj-redwood-min.css');

body {
  padding: 20px;
}

JavaScript

/**
RequireJS is used for lazy loading of resources as well as dependency resolution.
**/

require([
  'knockout',
  'ojs/ojinputnumber',
  'ojs/ojknockout'
], function(ko) {
  'use strict';

  let ViewModel = function() {
		this.width = ko.observable(10);

  };
  ko.applyBindings(new ViewModel(), document.getElementById('container'));
});


// CDN configuration for lading base JET libraries and resources
function _getCDNPath(paths) {
  var cdnPath = "https://static.oracle.com/cdn/jet/";
  var ojPath = "13.0.1/default/js/";
  var thirdpartyPath = "13.0.1/3rdparty/";
  var keys = Object.keys(paths);
  var newPaths = {};

  function _isoj(key) {
    return (key.indexOf('oj') === 0 && key !== 'ojdnd');
  }
  keys.forEach(function(key) {
    newPaths[key] = cdnPath + (_isoj(key) ? ojPath : thirdpartyPath) + paths[key];
  });
  return newPaths;
}

requirejs.config({
  paths: _getCDNPath({
    'knockout': 'knockout/knockout-3.5.1',
    'preact': 'preact/dist/preact.umd',
    'preact/hooks':'preact/hooks/dist/hooks.umd',
    'preact/compat': 'preact/compat/dist/compat.umd',
    'preact/jsx-runtime': 'preact/jsx-runtime/dist/jsxRuntime.umd',
    '@oracle/oraclejet-preact':'oraclejet-preact/amd',
    'jquery': 'jquery/jquery-3.6.0.min',
    'jqueryui-amd': 'jquery/jqueryui-amd-1.13.0.min',
    'ojs': 'min',
    'ojL10n': 'ojL10n',
    'ojtranslations': 'resources',
    'signals': 'js-signals/signals.min',
    'text': 'require/text',
    'hammerjs': 'hammer/hammer-2.0.8.min',
    'ojdnd': 'dnd-polyfill/dnd-polyfill-1.0.2.min',
    'touchr': 'touchr/touchr'
  })
});